Web前端篇:css定位

定位是一个相当复杂的话题,在去深入理解定位之前,我们先来聊一下之前我们的标准文档流下的布局。应用:网页中小广告,返回顶部的UI。1.Position属性定位方式:top,right,bottom,left属性决定该元素的最终位置。2.静态定位静态定位意味着“元素默认显示文档流的位置”。没有任何变化。<!DOCTYPEhtml><htmllang="en"><head&...

Web前端篇:css定位
  • 定位是一个相当复杂的话题,在去深入理解定位之前,我们先来聊一下之前我们的标准文档流下的布局。
  • 应用:网页中小广告,返回顶部的UI。
1.Position属性
  • 定位方式:top,right,bottom,left属性决定该元素的最终位置。
    在这里插入图片描述
    2.静态定位
    静态定位意味着“元素默认显示文档流的位置”。没有任何变化。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>静态定位</title> <style type="text/css">  .positioned{position: static;background-color: red;  } </style></head><body> <p class="positioned">我是静态定位的元素</p></body></html>

点击领取免费资料及课程

3.相对定位

  • 相对定位的元素是在文档中的正常位置的偏移,但是不会影响其他元素的偏移。

  • 参考点:以自身原来的位置进行定位,可以使用top,left,right,bottom对元素进行偏移。

  • 现象:

    不脱离标准文档流,单独设置盒子相对定位之后,。不用top,left,right,bottom对元素进行偏移,那么与普通的盒子没什么区别。 有压盖现象。用top,left,right,bottom对元素进行偏移之后,明显定位的元素的层级高于没有定位的元素(用top,left,right,bottom层级低)。

4.绝对定位

  • 相对定位的元素并没有脱离标准文档流,而绝对定位的元素则脱离了文档流。在标准文档流中,如果一个盒子设置了绝对定位,那么该元素不占据空间。并且绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时,则相对于根元素页面的左上角进行定位。
    点击领取免费资料及课程

  • 参考点:

     相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面左上角进行定位。

5.应用

相对定位的盒子,一般用于“子绝父相”,布局模式参考

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>  .box{width: 400px;height: 500px;background-color:red;position: relative;  }  div .c1{width: 200px;height: 200px;background-color:blue;position: absolute;top: 20px;left: 20px;  }  div .c2{width: 100px;height: 100px;background-color:greenyellow;position: absolute;top: 20px;left: 20px;  } </style></head><body> <div class="box">  <div class="c1">子1</div>  <div class="c2">子2</div> </div></body></html>子绝父相

6.z-index:
点击领取免费资料及课程
z-index有以下几个规则:

  • z-index只应用在定位元素,默认z-index:auto;

    z-index取值为整数,数值越大,它的层级越高。  如果元素设置了定位,没有设置z-index,那么谁写在后面的表示谁层级越高。从父现象,通常布局方案我们采用子绝父相,比较的是父元素的z-index值,哪个父元素的z-index值越大,表示子元素的层级越高。
源文地址:https://www.guoxiongfei.cn/csdn/5105.html
0