css中relative、absolute和float
position:relative和position:absolute都可以改变元素在文档流中的位置,设置position:relative或position:absolute都可以让元素激活left、top、right、bottom和z-index属性(默认情况下,这些属性未激活,设置也无效)
网页虽然看起来是平面的二维结构,但其实是有z轴的,z轴的大小由z-index控制,默认情况下,所有元素都是在z-index:0这一层的。元素根据自己的display类型、长度、内外边距等属性顺序排列在z-index:0之一层中,这就是文档流。
设置position:relative和position:absolute会让元素“浮”起来,也就是z-index值大于0,它会改变正常情况下的文档流。
不同的是postion:relative会保留自己在z-index:0的占位,left、top、right、bottom值是相对于自己在z-index:0的位置,虽然它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位置,但对其他仍然在z-index:0层的元素不会造成任何影响。
而position:absolute会完全脱离文档流,不再在z-index:0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的,如果祖先元素全部都没有设置position:relative或position:absolute,那么就相对于body元素。
除了position:relative和position:absolute,float也能改变文档流,不同的是,float属性不会让元素“上浮”到另一个z-index层,它仍然让元素在z-index:0层排列,float不像position:relative和position:absolute那样,它不能通过left、top、right、bottom属性精确地控制元素坐标,它只能通过float:left和float:right来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列,影响到周围元素。
另一个有趣的现象是,position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none(元素不显示)除外),只要设置了position:absolute、float:left或float:right中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。就算我们显示地设置了display:inline或者display:block,也仍然无效,(float在IE6下的双倍边距bug就是利用添加display:inline来解决的)。值得注意的是,position:relative却不会隐式改变display类型。
css中relative、absolute和float相关推荐
- CSS中的Position、Float属性的一些深入探讨
为什么80%的码农都做不了架构师?>>> HTML布局的基本要点: 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(bo ...
- CSS中div的浮动float
------------------------------CSS中div的浮动float----------------------------------- HTML页面的标准文档流(默认布局)是 ...
- CSS中的趣事之float浮动
浮动float一般跟left或是right: 特性: 1,包裹性:浮动文本类型时,需要指定宽度width,如果不指定,就会折叠到最小宽度: 2,浮动会影响别的元素: 3,子级浮动,会导致父级高度 ...
- 对css中的浮动属性float刨根解牛
1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 2.几张图说明浮动常 ...
- css中的position和float属性
我们在前端开发时一定会用到相对定位.绝对定位.浮动模型等等来调整块的位置.但在调整块与块之间的位置时又有一些需要注意的细节,推荐大家进入点击打开链接进行学习. 文章讲的较为详细,一定对大家有帮助.
- css中position(absolute)与margin同时使用的情况
当元素绝对定位以后,它在父元素的位置是根据top/left/right/bottom来定位的,而margin是根据自身当前位置来定位的 当它距离父元素left:50%,top:50%,那就是父元素一半 ...
- html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- css中position属性(absolute/relative/static/fixed)
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
- CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
- CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)?
问题: CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)? 搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者relative ...
最新文章
- CTF---Web入门第十二题 程序逻辑问题
- java微信开发bae_在百度BAE2.0 JAVA环境下搭建属于自己的微信公众平台接口
- C基础——目标代码文件、可执行文件和库
- halcon轮廓擦除_halcon第十二讲,毛刺去除
- java was datasource_mybatis默认的数据源连接池(PooledDataSource和UnPooledDataSource)
- mysql large pages_Innodb内存管理解析
- VB之Collection---Collection集合类
- 2021北京交通大学《深度学习》平台课—第1讲:绪论
- 后台网站二级页面制作步骤
- 利用vim编辑器创建和编辑正文文件
- 实验:4级流水线32bits全加器
- 如何去除matlab存图时的白边
- ROS运行时出现Couldn‘t find executable错误
- 有关振动试验夹具的问题
- Nacos服务健康监测
- 如何轻松代理您的Android设备
- USACO——Mixing Milk 混合牛奶
- 矩阵奇异值计算的一种新方法——基于R语言实现
- 元旦到了,手把手教你用 Python 制作一个炫酷烟花秀
- 栈:栈的基本操作总结
热门文章
- java摄氏度转华氏度 在控制台输入
- 物联网共享打印机系统是怎么做出来的?
- 用PyAV完成视频解码之后,如何完成视频分辨率的转换?
- linux sdcc stc12c5a60s2,STC12C5A60S2单片机最小系统板20个参考例程分享
- 读书笔记:《大型网站技术架构:核心原理与案例分析》(李智慧)(一)
- 朱朱的2020年(上)
- Google 2018 IO 大会要点
- FusionPortable:用于评估不同平台上的定位和建图精度的多传感器校园数据集
- (附源码)springboot金融新闻信息服务系统 毕业设计651450
- qduoj 分辣条1 (搜索+剪枝)