CSS--position属性
来源:互联网 发布:mac 添加歌曲至资源 编辑:程序博客网 时间:2024/06/06 05:33
值
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit规定应该从父元素继承 position 属性的值。static:定位默认值
默认position为static
<html> <head> <style> #d1{border:1px solid black;width:150px;height:150px;background:red;} #d2{width:300px;height:300px;background:blue;} </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body></html>
absolute:
position为absolute:某标签的position设置为absolute,那么该标签将会脱离默认文档流成为一个绝对的“层”。可以通过z-index属性控制层与层之间的覆盖关系。数值越大越靠上。还可以通过top/left/right/bottom属性控制组件摆放位置。在使用这些属性进行定位时,需要相对参照物。渲染引擎会寻找含有“position:relative”属性的被继承标签,依次从父标签往上找,如父标签含有,则以父标签作为参照,如无则继续往“祖先”标签找,都没有,则以<body>作为参照。
<html> <head> <style> #d1{width:150px;height:150px;background:red;position:absolute;} #d2{width:300px;height:300px;background:blue;} </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body></html>
<html> <head> <style> #d1{width:150px;height:150px;background:red;position:absolute;} #d2{width:300px;height:300px;background:blue;position:absolute;} </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body></html>
设置z-index
<html> <head> <style> #d1{width:150px;height:150px;background:red;position:absolute;z-index:200;} #d2{width:300px;height:300px;background:blue;position:absolute;z-index:100;} </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body></html>
relative:
fixed:
0 0
- CSS position 属性
- CSS background-position 属性
- CSS定位属性Position
- css 之 position属性
- CSS position属性
- css position属性
- css中的position属性
- CSS position 属性
- CSS的position属性
- CSS position 属性
- CSS position 属性用法
- CSS之Position属性
- CSS background-position 属性
- CSS中的Position属性
- CSS的position属性
- CSS position 属性
- CSS中的Position属性
- CSS 定位position属性
- 在ios中调用C语言的国密算法SM2以替换RSA
- 对象资源管理及智能指针的简单用法
- 将一个从大到小的数组,用以下排序方法排序成从小到大的,()最快。----阿里巴巴2015实习生笔试题
- java synchronized详解
- 实现WEB压缩的三种途径:Web服务器(Nginx/Apache)、Php扩展、Php代码
- CSS--position属性
- HDU 5372 线段树
- Objective-C——Category、Extension、Protocol
- CSS3属性之多栏布局column
- SDKD 2016 Summer Single Contest #02.C
- Xcode项目代码行数统计
- Unity接入安卓程序,打包出错的解决办法
- jQuery 之 选择器与事件类型(二)
- Python使用hashlib模块做字符串加密