CSS——固定定位和Z-index值

固定定位
就是相对浏览器窗口定位，绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素，当position属性取值为fixed时，即为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。页面如何滚动，这个盒子显示的位置不变。

固定定位的元素跟父亲没有任何关系，只认浏览器，完全脱标，不占有位置，不随着滚动条滚动。

     .backtop{position: fixed;width: 100px;height: 100px;background-color: gray;bottom: 100px;right: 30px;text-align: center;line-height: 30px;color: white;text-decoration: none;}</style>
</head>
<body><a href="" class="backtop">返回顶部</a><img src="data:images/wuyuetian.jpg" alt="" /><img src="data:images/wuyuetian.jpg" alt="" /><img src="data:images/wuyuetian.jpg" alt="" /><img src="data:images/wuyuetian.jpg" alt="" />
</body>

返回顶部就是固定定位。

 <style type="text/css">*{margin: 0;padding: 0;}.nav{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #333;}</style>
</head>
<body><div class="nav"></div><img src="data:images/wuyuetian.jpg" alt="" /><img src="data:images/wuyuetian.jpg" alt="" /><img src="data:images/wuyuetian.jpg" alt="" /><img src="data:images/wuyuetian.jpg" alt="" />
</body>

固定定位脱标。

IE6不兼容固定定位。

Z-index值
z-index值表示谁压着谁，数值大的压盖住数值小的。
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。如果取值相同，则根据书写顺序后来居上。后面数字不能加单位。
只有定位了的元素才有z-index值。不管相对定位、绝对定位、固定定位都可以使用z-index值，浮动的东西不能使用。
如果大家都没有z-index值，或者z-index值都一样，那么谁写在html后面，谁在网页上能压盖住别人。定位了的元素永远能够压住没有定位的元素。

从父现象。
z-index没有单位。
z-index: 988;

 <style type="text/css">*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;background-color: yellowgreen;}.box2{width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>

 <style type="text/css">*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;background-color: yellowgreen;position: absolute;top: 100px;left: 100px;z-index: 999;}.box2{width: 200px;height: 200px;background-color: skyblue;position: absolute;top: 180px;left: 180px;z-index:555;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>

CSS——固定定位和Z-index值相关推荐

CSS固定定位与粘性定位4大企业级案例
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例.如果想了解的可以在公众号里面查看去看.本小节我们学习下固定定位与粘性定位的应用场景和案例. 属性值描述 relative 相对定位相 ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
css固定定位在某个元素的右边
如何将2号盒子固定定位在1号盒子右边,1号盒子在浏览器中居中显示. 第一种: css水平布局满足等式 left + margin-left+padding-left+width+padding-rig ...
html固定定位原理,css固定定位
定位的四种模式:static,relative,absolute,fixed 定位的四个位置:left,right,top,bottom 定位属性:position,有四种状态值 1.static:静 ...
CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]
1基础 Fixed:固定定位是相对于浏览器窗口来定位的 Absolution: 绝对定位:当没有父元素或者父元素没有进行定位的时候,就是固定定位,以浏览器为标的物元素会脱离文档流,若该元素没有设置 ...
css固定定位与绝对定位的区别
绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和 ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
CSS相对定位,固定定位,绝对定位实例方法和实例
1CSS相对定位方法实例: 当容器的position属性值为relative时,这个容器即被相对定位了.相对定位和其他定位相似,也是独立出来浮在上面.不过相对定位的容器的top(顶部).bottom( ...

CSS——固定定位和Z-index值

CSS——固定定位和Z-index值相关推荐

最新文章

热门文章