css的三种定位方式是:1、相对定位,元素的位置相对于它的原始位置计算而来,语法“position:relative;”;2、固定定位,语法“position:fixed;”;3、绝对定位,语法“position:absolute;”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
相对定位
该元素的位置是相对于它的原始位置计算而来的。
position:relative;
他是默认参照父级的原始点为原始点,配合top、right、bottom、left进行定位。
<!DOCTYPE html> <html> <head> <Meta charset=UTF-8 /> <title>相对定位</title> <style type=text/css> .king{ margin-top: 30px; margin-left: 30px; border: 1px solid silver; background-color: skyblue; width: 40%; } .king div{ width: 100px; height: 60px; margin: 10px; background-color: sNow; color: black; border: 1px solid black; } .three{ position: relative; top: 20px; left: 50px; } </style> <body> <div class=king> <div class=one>one</div> <div class=two>two</div> <div class=three>three</div> <div class=four>four</div> </div> </body> </html>
固定定位
被固定的元素不会随着滚动条的拖动而改变位置。
position:fixed;
在默认情况下,固定定位元素的位置是相对浏览器而言,结合top、bottom、left和right这4个属性一起使用。
<!DOCTYPE html> <html> <head> <Meta charset=UTF-8 /> <title>固定定位</title> <style type=text/css> .first{ width: 50px; height: 160px; border: 1px solid gray; background-color: #b7f1b7; } .second{ position: fixed; top: 50px; left: 160px; width: 150px; height: 100px; border: 1px solid silver; background-color:#b7f1b7; } </style> <body> <div class=first>div元素</div> <div class=second>固定定位的div元素</div> </body> </html>
绝对定位
position:absolute;
默认情况下,绝对定位的位置是相对于浏览器而言,配合top、right、bottom、left进行定位。
<!DOCTYPE html> <html> <head> <Meta charset=UTF-8 /> <title>绝对定位</title> <style type=text/css> .king{ padding: 15px; border: 1px solid silver; background-color: skyblue; width: 30%; } .king div{ padding: 10px; } .one{ background-color: chartreuse; } .two{ background-color: cyan; position: absolute; top: 20px; right: 40px; } .three{ background-color: darkred; } .four{ background-color: dimgrey; } </style> <body> <div class=king> <div class=one>one</div> <div class=two>two</div> <div class=three>three</div> <div class=four>four</div> </div> </body> </html>
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 元素可拥有负的 z-index 属性值。
- Z-index 仅能在定位元素上奏效(例如 position:absolute;)
属性值: auto:默认,堆叠顺序与父元素相等。 number:设置元素的堆叠顺序。 inherit:规定应该从父元素继承 z-index 属性的值。
例: 设置图像的 z-index:
img{ position:absolute; left:0px; top:0px; z-index:-1; }
原文地址:https://www.jb51.cc/css/1205436.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。