CSS样式的定位

来源：互联网发布：java暂停线程wait 编辑：程序博客网时间：2024/05/18 12:04

当元素没有position定位属性时，所有元素按照他们自己的定位标准进行定位，比如说：每一个div标签就占一行。

但是当元素我有了position属性，那么div原先占有一行的属性就被覆盖掉了（可以说没有用了）。

例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css"/>        <script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script>        <script type="text/javascript" src="../ext-3.2.0/ext-all.js"></script> <script type="text/javascript" src="../ext-3.2.0/src/locale/ext-lang-zh_CN.js"></script>   <span style="white-space:pre"></span><script type="text/javascript" src="drag.js"></script><style>#block{background:red;width:200px;height:150px;}#target{        position:absolute;<span style="color:#ff0000;">  //有了这个属性及下面的left和top我们的两个div就在同一行了。</span>left:300px;top:50px;background:rgba(0,0,0,0.5);width:500px;height:300px;}#cont{        position:absolute;left:500px;top:700px;background:rgba(0,23,0,0.5);width:200px;height:200px;}.han{width:50px;height:50px;background:yellow;margin-bottom:10px;}#target1{        position:absolute;}.han1{position:absolute;left:700px;top:700px;width:50px;height:50px;background:yellow;}</style></head><body><div id="block" ><div id="block1" class="han">句柄1</div><div id="block2" class="han">句柄2</div></div><div id="target" >containr<div id="target1" class="han">句柄</div></div><div id="cont1" class="han1">句柄</div><div id="cont">cont</div></body></html>

结果：

现在来看看absolute和relative布局之间的区别：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css"/>        <script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script>        <script type="text/javascript" src="../ext-3.2.0/ext-all.js"></script> <script type="text/javascript" src="../ext-3.2.0/src/locale/ext-lang-zh_CN.js"></script>   <script type="text/javascript" src="drag.js"></script><style>#block{background:red;width:200px;height:150px;}#target{position:relative;//就这里和前面不一样</span>left:300px;top:300px;<span style="color:#cc0000;">//top的值改了一下</span>background:rgba(0,0,0,0.5);width:500px;height:300px;}#cont{position:absolute;left:500px;top:700px;background:rgba(0,23,0,0.5);width:200px;height:200px;}.han{width:50px;height:50px;background:yellow;margin-bottom:10px;}#target1{position:absolute;}.han1{position:absolute;left:700px;top:700px;width:50px;height:50px;background:yellow;}</style></head><body><div id="block" ><div id="block1" class="han">句柄1</div><div id="block2" class="han">句柄2</div></div><div id="target" >containr<div id="target1" class="han"></div></div><div id="cont1" class="han1">句柄</div><div id="cont">cont</div></body></html>

结果：

最后给出position属性的其他的值：url为

http://www.w3school.com.cn/cssref/pr_class_position.asp

0 0