标签:固定 默认 span 设置 absolute 显示 考点 原来 relative
1.为了解决页面中特殊的页面效果
主要包括两部分:
定位模式:static relative absolute fixed
偏移量: top right bottom left
.box { position: static; }
特点:
1.所有的标签都有静态定位,相当于没有定位
2.静态定位的元素,占据标准流的位置
3.不能使用边偏移改变元素当前的位置
4.也就是说原来怎么样还是怎么样,设置的position跟没写一样。
.box { position: relative; left: 50px; top: 60px; }
1.相对定位的元素,需要设置属性position:realative;再设置一个边偏移 left /top
2.相对定位的元素不脱离标准流的位置,仍然占据原来的位置 不脱标
3.可以通过偏移量来进行位置的移动
4.是根据自身原来的位置进行的移动
5.相对定位,单纯的自身移动位置,用的并不多。一般用于限定绝对定位元素的范围。
.box { position: absolute; top:100px; left: 100px; }
1.绝对定位的元素,需要设置属性position:absolute;如果需要移动则再需要设置边偏移 left top
2.绝对定位的元素,是可以移动位置的
3.绝对定位的元素脱离标准流 ,不占据原来的位置 脱标
4.绝对定位的元素和标准流的元素如果位置有重合的话,则会盖住标准流的元素
5.当页面中有一个绝对定位的元素时,如果设置了边偏移left,top的话,参考位置是页面的左上角
6.当子元素有一个父元素,子元素是绝对定位,而父元素没有定位的时候,则当前的子元素还是以页面为参考点
7.当子元素有一个父元素,子元素是绝对定位,而父元素是相对定位的时候,则当前的子元素移动是以父元素为参考点
8.当元素有多层嵌套的时候,子元素是一个绝对定位,参考点是以离自身最近的具有非静态(static)定位的父级盒子为参考。
9.绝对定位会改变元素原来的显示方式(行内元素,会变成行内块;块级元素也会变成行内块元素)
10.绝对定位了的元素,脱离了标准流,所以再用margin:auto无效,绝对定位的元素盒子边界是以margin为边界
.box { position: fixed; top: 10%; left: 100px; }
特点:
1.固定定位脱离标准流,不占据标准流的位置
2.固定定位可以通过边偏移来移动位置
3.可以改变元素的显示方式(可以将行内元素变成行内块元素)
4.参考点是浏览器页面的可视区
1.当定位的元素位置有重合的时候,会有一个默认的叠放次序
2.默认后面的元素会盖住或是压住前面的元素
3.只要是定位了的元素(不包括static定位)相当于都有一个默认的层级的概念,默认的层级是0,用z-index
4.如果要想让被压住的元素,显示在最上面,需要给被压住的元素设置一个属性z-index:最要这个值是最大,就会在最上面的显示。
5.z-index的值不要设置负数,会出现不可控的现象。
标签:固定 默认 span 设置 absolute 显示 考点 原来 relative
原文地址:https://www.cnblogs.com/sauronblog/p/11441498.html