css position 定位
程序员文章站
2024-03-20 17:10:28
...
- static、absolute、fixed、relative、inherit
1.static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2.absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.one{
position: fixed;
left: 5px;
top: 5px;
width: 100px;
height: 100px;
}
.two{
position: absolute;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<div class="one">一些文本
<p class="two">更多的文本。</p>
</div>
</body>
</html>
父元素是fixed，子元素相对于父元素来进行absolute定位。
3.fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.one{
position:fixed;
left:5px;
top:5px;
}
p.two{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
相对于浏览器窗口进行定位，右侧控制台随意拉动，更多的文本的dom随着拉动变化位置。
4.relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
5.inherit
规定应该从父元素继承 position 属性的值。
上一篇： Android Crash的防护与追踪
下一篇： 理解Native Crash处理流程
推荐阅读