CSS 定位属性position
2017-04-17 15:27
381 查看
一、position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。
有4种不同类型的定位:
①absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
②relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
③fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。(一般很少用,浏览器不兼容!)
④static :默认值;默认布局。
二、position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,就需要使用下面的属性:
①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。
②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。
③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。
④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。
上面属性的值可以为负,单位:px,%。
二、position属性的应用
(1)absolute 绝对定位:
(1-1)如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
效果:
(1-2)如果以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移.
效果:
(2)relative 相对定位:
无论是在标准流中还是在浮动流中,都不会对它的父级元素和相邻元素有任何影响,它只针对自身原来的位置进行偏移。
综合应用:
<style type="text/css">
#pic {
width:60%; /*宽度*/
position:relative; /*参考点*/
border:1px solid green; /* 边框*/
padding:80px;
margin:0px auto; /* 水平居中*/
}
.bno {
position:absolute; /*绝对位置的偏移 */
left:100px;
top:90px;
}
.title {
position:absolute; /*绝对位置的偏移 */
left:-12px;
top:15px;
}
</style>
</head>
<body>
<div id="pic">
<div class="title"><img src="image/bg_bang.gif" alt="title" /></div>
<img src="image/book-01.jpg" width="260" height="260" />
<div class="bno"><img src="image/bookNo1.gif" width="27" height="48" /></div>
</div>
</body>
效果:
有4种不同类型的定位:
①absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
②relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
③fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。(一般很少用,浏览器不兼容!)
④static :默认值;默认布局。
二、position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,就需要使用下面的属性:
①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。
②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。
③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。
④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。
上面属性的值可以为负,单位:px,%。
二、position属性的应用
<style type="text/css"> div { width: 100%; height:500px; border:1px solid gray; padding:10px; /* margin:10px;*/ } .d1{ width:100px; height:50px; border:1px solid green; /* 绝对定位: */ <!--position:absolute; left:100px; top:150px;--> } .d2{ width:100px; height:50px; border:1px solid green; background:#FCF; } </style> </head> <body> <div> <div class="d1">div1_absolute</div> <div class="d2">div2</div> </div>
(1)absolute 绝对定位:
(1-1)如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
效果:
(1-2)如果以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移.
.d1 { width:100px; height:50px; border:1px solid green; /* 相对定位:作为参考点 */ position:relative; left:50px; } .d2 { width:100px; height:50px; border:1px solid green; background:#FCF; /* 绝对定位: */ position:absolute; left:150px; top:150px; }
效果:
(2)relative 相对定位:
无论是在标准流中还是在浮动流中,都不会对它的父级元素和相邻元素有任何影响,它只针对自身原来的位置进行偏移。
.d1 { width:100px; height:50px; border:1px solid green; /* 相对定位:作为参考点 */ position:relative; left:50px; top:50px; }效果:
综合应用:
<style type="text/css">
#pic {
width:60%; /*宽度*/
position:relative; /*参考点*/
border:1px solid green; /* 边框*/
padding:80px;
margin:0px auto; /* 水平居中*/
}
.bno {
position:absolute; /*绝对位置的偏移 */
left:100px;
top:90px;
}
.title {
position:absolute; /*绝对位置的偏移 */
left:-12px;
top:15px;
}
</style>
</head>
<body>
<div id="pic">
<div class="title"><img src="image/bg_bang.gif" alt="title" /></div>
<img src="image/book-01.jpg" width="260" height="260" />
<div class="bno"><img src="image/bookNo1.gif" width="27" height="48" /></div>
</div>
</body>
效果:
相关文章推荐
- CSS元素的定位属性position
- 推荐深入理解css中的position定位和z-index属性
- 深入理解css中的position定位和z-index属性,CSS的定位属性共有9个
- [转]深入理解css中的position定位和z-index属性
- CSS的定位即position属性的值有4种:static,relative,absolute,fixed
- CSS中position属性详解以及定位的说明
- CSS:元素定位之position属性
- css盒子定位position的属性
- css position 属性 定位学习
- CSS background-position 属性 定位图片
- Css 详细解读定位属性 position 以及参数
- css 属性定位position 详解
- CSS Position 定位属性
- CSS中的position属性(定位)
- 总结一下CSS中的定位 Position 属性(转)
- CSS中position属性详解以及定位的说明——实验1
- 栋栋晓07:详解css布局中的定位position属性
- CSS position 属性:绝对定位与相对定位,以及浮动
- 总结一下CSS中的定位 Position 属性
- CSS中position属性详解以及定位的说明——实验2