css position属性
来源:互联网 发布:寒冬之握淘宝 编辑:程序博客网 时间:2024/05/15 18:29
这是css2的html属性,所有主流浏览器都支持。
一、Relative
相对于自身原来的位置进行定位,不脱离文档流,偏移出来的空间仍然被占据,其他文档元素不能占有由于偏移而空出来的空间。
Expmple:
Css样式:
div{
width:200px;
height:200px;
}
#div2{
background-color: red;
}
#div1{
position: relative;
background-color:green;
top:50px;
left: 50px;
}
Html结构:
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
效果图:
绿色div块,相对于其本身偏移,偏移出来的空白空间不能被红色块所占据。
一、Absolute
相对于他的第一个position属性值不为static的父元素定位。(感觉有点绕口。。),就是他的父元素中第一个position属性值为relative或者absolute的那个父元素定位。定位之后脱离了文档流,原来空间可以被占据。
Example:
Css代码:
#div1{
border:1px solid black;
height: 400px;
width:400px;
margin:0 auto;
background-color: red;
position: relative;
}
#div2{
height: 300px;
width:300px;
margin:50px auto;
background-color:green;
}
#div3{
position: absolute;
left:100px;
height: 200px;
width:200px;
background-color: yellow;
}
Html结构:
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
效果图:
可见黄色绝对定位,向左偏移100px,他的父元素有div1,div2,而他的最外层父元素div1有relative定位属性,所以相对div1即红色块向左偏移了100px。
再向绿色块加入一个div块,检验是否会占据黄色偏移空出来的空间。
#div4{
width:100px;
height:100px;
Float:left;
background-color: black;
}
效果图:
可见黑色框占据了黄色框偏移出来的空间。
一、Fixed
固定定位,相对于浏览器窗口定位,意思就说就算页面发生滚动,fixed定位的元素位置也不会发生变化。
应用的地方其实还是挺多的,回到顶部之类,还是顶部固定的导航也会应用到。
- 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属性
- 側滑的配置
- 9、自动调用在线翻译进行内容翻译
- JAVA内存溢出之HeapOutOfMemoryDemo
- Objective-C 编程全解-第01章 面向对象的编程
- PHP之OOP: 编程思想从过程到对象!
- css position属性
- 排序 插入排序
- Android性能优化
- AlertDialog----确认单击物理键退出对话框
- 8909 QFIL烧录
- ROS在ARM上的编译
- JS中Null与Undefined的区别
- Hadoop实例:二度人脉与好友推荐
- 菜鸟写给菜鸟的 ——LeetCode解题笔记 Easy-题目1:292. Nim Game