元素定位(1)--absolute与float

最新推荐文章于 2024-11-15 11:24:51 发布

Alaricming321

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量240

点赞数

分类专栏： HTML5+CSS3 文章标签： css

本文链接：https://blog.csdn.net/weixin_33925527/article/details/52649837

版权

HTML5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文探讨了CSS中绝对定位（absolute positioning）的特性及其如何影响页面布局，并详细讨论了浮动（float）的工作原理及与绝对定位元素之间的交互。通过实际案例说明了不同情况下元素的表现形式。

摘要由CSDN通过智能技术生成

absolute:

1.absolute具有包裹性

2.位置跟随 ？
3.给某一元素添加position:absolute
  1》不设置左右值：该元素在页面显示中仍旧处于原来位置；几个相邻元素同时绝对定位时，由于前者脱离文档流，后者上前补充由此，则后者的绝对定位的原始位置已经变成了前者所处的位置，几个元素最终占据了相同位置，且后来者居上；
  2》设置左右值偏移值：相对定位和绝对定位都是相对于父级的相对定位或者绝对定位元素为依据的，当没有的时候，默认参考为body.
 *对绝对定位元素添加padding，margin仍然起作用；
 *不论是行内与块级，行内与行内，块级与块级，

 *浮动之于绝对定位：两者位置发生重叠时，float会占据上方

float

浮动框向左或向右移动，知道它的外边缘碰到包含框或者另外一个浮动；由于浮动不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样
*对于上述内容的解释：1》适用于行内元素
                  2》对于块级元素，直接看作浮动元素不存在进行定位
                  3》浮动元素的定位是是针对当前这一行来说的