绝对定位

最新推荐文章于 2023-04-11 20:12:02 发布

杨宗健

最新推荐文章于 2023-04-11 20:12:02 发布

阅读量587

点赞数

分类专栏： CSS新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/75806830

版权

13 篇文章 0 订阅

订阅专栏

  绝对定位注意点： 

  （1）绝对定位的元素是脱离标准流的。 

  绝对定位脱标演示： 

  绝对定位之前： 

  给第二个box2添加position：absolute；绝对定位属性。 

  因为第二个box2脱标了，所以box2不属于标准流，box3要向上顶替box2的位置，所以box2脱标后的位置将box3盖住了。 

  （2）浮动元素是脱离标准流，所以浮动不区分行类和块级。绝对定位是脱离标准流的，所以也不区分行类和块级。绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。 

  证明如下： 

  以span标签为例子： 

  span为行类元素。 

  没有对span进行绝对定位之前： 

  <!DOCTYPE html> 

  <html> 

  <head> 

  <meta charset="utf-8"> 

  <title>清除浮动</title> 

  <base target="_self"> 

  <style type="text/css"> 

*{

  padding: 0; 

  margin: 0; 

}

  div{ 

  width: 100px; 

  height: 100px; 

}

  .box1{ 

  background-color: red; 

}

  .box2{ 

  background-color: blue; 

}

  .box3{ 

  background-color: green; 

}

  span{ 

  width: 100px; 

  height: 100px; 

  background-color: yellow; 

}

  </style> 

  </head> 

  <body> 

  <div class="box1"></div> 

  <div class="box2"></div> 

  <div class="box3"></div> 

  <span>我是内容。</span> 

  </body> 

  </html> 

  对span进行绝对定位之后： 

  <!DOCTYPE html> 

  <html> 

  <head> 

  <meta charset="utf-8"> 

  <title>清除浮动</title> 

  <base target="_self"> 

  <style type="text/css"> 

*{

  padding: 0; 

  margin: 0; 

}

  div{ 

  width: 100px; 

  height: 100px; 

}

  .box1{ 

  background-color: red; 

}

  .box2{ 

  background-color: blue; 

}

  .box3{ 

  background-color: green; 

}

  span{ 

  position: absolute; 

  width: 100px; 

  height: 100px; 

  background-color: yellow; 

}

  </style> 

  </head> 

  <body> 

  <div class="box1"></div> 

  <div class="box2"></div> 

  <div class="box3"></div> 

  <span>我是内容。</span> 

  </body> 

  </html> 

  什么是绝对定位？ 

  绝对定位就是相对于body来定位的。 

关注