fixed固定定位定位元素的层级和float层级的区别遮盖效果

DobbyKim 发布于2019-08-29 18:35 / 2514人阅读

摘要：讲固定定位固定定位与上一讲的绝对定位很相似，不同点是固定定位永远是浏览器窗口左上角不会随着滚轴滚动，常用来做广告讲元素的层级相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。

71讲固定定位

固定定位与上一讲的绝对定位很相似，不同点是：

固定定位永远是浏览器窗口左上角

不会随着滚轴滚动，常用来做广告

72讲元素的层级

相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。绝对定位脱离了文档流，也能实现遮盖。另外float也会脱离文档流实现某种意义上的遮盖。当这三个遇到一块会出现什么情况？

层级z-index

只有设置了position才可以使用z-index(position:static除外)进行层级的设置，默认层级是0

父元素的层级再高也不会盖住子元素



层级

关于float层级

div1绝对定位会脱离文档流position:absolute，那么此时我设置div2为float:left会出现什么效果呢？发现设置了position:absolute后也会把float进行遮盖，并不会出现两个元素水平排列



导航条

遮盖与总结

如果要实现遮盖效果 position:absolute，应该是首先会想到的

设置了position属性后会有专属的属性出现:left top bottom right z-index其他元素不可以使用~~!

私有云 idc机房托管 vps的层级时间服务器的层级 js 无限层级的树状元素定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114426.html

fixed固定定位定位元素的层级和float层级的区别遮盖效果

摘要：讲固定定位固定定位与上一讲的绝对定位很相似，不同点是固定定位永远是浏览器窗口左上角不会随着滚轴滚动，常用来做广告讲元素的层级相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。 71讲固定定位固定定位与上一讲的绝对定位很相似，不同点是：固定定位永远是浏览器窗口左上角不会随着滚轴滚动，常用来做广告 72讲元素的层级相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。绝对定...

superw 2019-08-02 16:12 评论0 收藏0
fixed固定定位定位元素的层级和float层级的区别遮盖效果

摘要：讲固定定位固定定位与上一讲的绝对定位很相似，不同点是固定定位永远是浏览器窗口左上角不会随着滚轴滚动，常用来做广告讲元素的层级相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。 71讲固定定位固定定位与上一讲的绝对定位很相似，不同点是：固定定位永远是浏览器窗口左上角不会随着滚轴滚动，常用来做广告 72讲元素的层级相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。绝对定...

王晗 2019-08-05 16:42 评论0 收藏0
CSS原生布局方式

摘要：布局任何元素在默认的情况下都是处于整个文档流中的，不会浮动的。相对定位如果想为元素设置层级布局模型中的相对定位，需要设置表示相对定位，它通过属性确定元素在正常文档流中的偏移位置。 showImg(https://segmentfault.com/img/remote/1460000009753577); 前言网页原生布局的方法其实网上有很多，大概为Flow（流动布局模型）、Float...

PingCAP 2019-08-20 17:14 评论0 收藏0
web前端（12）—— 页面布局2

摘要：是以首屏页面左下角为参考点来调整位置。因为绝对定位脱离标准流，影响页面的布局。相反父相子绝在我们页面布局中，是常用的布局方案。本篇博文，主要就讲定位的问题，也就是页面布局里最重要的，本篇博文不出意外的话，也是css的最后一篇博文了定位，position属性定位有三种：相对定位绝对定位固定定位相对定位，position：relative 相对定位的意思就是相对于自身元素原来...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
前端笔记之CSS（下）浮动&BFC&定位&Hack

摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS：　　样式：　　布局：　　　　标准流(标准文档流、普通文档流)：盒子模型(width/height...

番茄西红柿 2019-04-23 11:44 评论0 收藏0