CSS基础

Posted 2022-09-17 sauronblog

1.为什么要学习定位

1.为了解决页面中特殊的页面效果

2.为了元素能够在页面中灵活的进行移动

 

2.定位的属性

主要包括两部分：

定位模式：static relative absolute fixed

偏移量: top right bottom left

 

3.静态定位

.box 
  position: static;

 

特点：

1.所有的标签都有静态定位，相当于没有定位

2.静态定位的元素，占据标准流的位置

3.不能使用边偏移改变元素当前的位置

4.也就是说原来怎么样还是怎么样，设置的position跟没写一样。

 

4.相对定位

.box 
  position: relative;
  left: 50px;
  top: 60px;

 

1.相对定位的元素，需要设置属性position:realative;再设置一个边偏移 left /top

2.相对定位的元素不脱离标准流的位置，仍然占据原来的位置 不脱标

3.可以通过偏移量来进行位置的移动

4.是根据自身原来的位置进行的移动

5.相对定位，单纯的自身移动位置，用的并不多。一般用于限定绝对定位元素的范围。

 

5.绝对定位 absolute

.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为边界

 

6.固定定位fixed

.box 
  position: fixed;
  top: 10%;
  left: 100px;

 

特点：

1.固定定位脱离标准流，不占据标准流的位置

2.固定定位可以通过边偏移来移动位置

3.可以改变元素的显示方式(可以将行内元素变成行内块元素)

4.参考点是浏览器页面的可视区

 

7.定位元素的叠放次序 z-index(层级)

1.当定位的元素位置有重合的时候，会有一个默认的叠放次序

2.默认后面的元素会盖住或是压住前面的元素

3.只要是定位了的元素(不包括static定位)相当于都有一个默认的层级的概念，默认的层级是0，用z-index

4.如果要想让被压住的元素，显示在最上面，需要给被压住的元素设置一个属性z-index:最要这个值是最大，就会在最上面的显示。

5.z-index的值不要设置负数，会出现不可控的现象。