CSS样式的定位

最新推荐文章于 2023-10-13 21:06:51 发布

masterShaw

最新推荐文章于 2023-10-13 21:06:51 发布

阅读量707

点赞数

分类专栏： CSS html 文章标签： css html

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

当元素没有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

masterShaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式的定位

当元素没有position定位属性时，所有元素按照他们自己的定位标准进行定位，比如说：每一个div标签就占一行。但是当元素我有了position属性，那么div原先占有一行的属性就被覆盖掉了（可以说没有用了）。例：Insert title here #block{ background:red; width:200px; hei
复制链接

扫一扫