同一个元素中同时使用浮动和定位

♡鲸落♡

于 2021-06-23 11:18:38 发布

阅读量2.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45151873/article/details/118145916

css 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在CSS中将浮动(float)和定位(position)结合使用时的情况。首先，当float与relative结合，两者可以同时生效，常用于父元素浮动、子元素定位的布局。然而，一旦使用了absolute定位，浮动属性将失效。此外，还分析了在同一元素中，一个浮动块和一个绝对定位块在z轴上的位置变化，特别是z-index的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当在同一个元素中同时使用浮动和定位时，分情况讨论：

1、`float` 可以和 `relative` 混用：两个同时起作用

经常用于父元素浮动，里面的子元素定位
在这里插入图片描述

<div class="father">
  <div class="son"></div>
</div>
.father {
  background: #b3b3ff;
  height: 500px;
  width: 500px;
  float: right;
  position: relative;
}
.son {
  background: #b7cffb;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
}