码迷,mamicode.com
首页 > Web开发 > 详细

css教程2

时间:2019-08-10 14:11:17      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:意思   ssh   strong   覆盖   gre   基于   浏览器   方式   back   

定位:

position 属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

 

static:

平常我们根本就用不到“position:static”,不过呢,如果有时候我们使用javascript来控制元素定位的时候,如果想要使得其他定位方式的元素变成静态定位,就要使用“position:static;”来实现

 

fixed:

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

Fixed定位使元素的位置与文档流无关,因此不占据空间。

 

relative:

相对定位元素的定位是相对其正常位置。

移动相对定位元素,但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

 

absolute:

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。

 

 

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

 

 

重叠元素:

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

 

裁剪元素:

clip:rect(0px,60px,200px,0px);

 

超出

 overflow: visible; 超出可见

 overflow: auto; 超出出现滚动条

 overflow: hidden; 超出隐藏

 overflow: scroll; 出现滚动条

 

 

改变光标:

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

 

css教程2

标签:意思   ssh   strong   覆盖   gre   基于   浏览器   方式   back   

原文地址:https://www.cnblogs.com/webcyh/p/11331244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!