详解详解css position 5种不同的值的用法种不同的值的用法
position属性属性
position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值：
•static
•relative
•fixed
•absolute
•sticky
然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置
值，它们的工作方式也不同。
position:static;
默认情况下，HTML元素定位为静态。静态定位元素不受top，bottom，left和right属性的影响。 元素position:static;没有以任何
特殊方式定位; 它总是根据页面的正常流程定位：
这个<div>元素的position:static;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>一个位置为position:static; 没有任何特殊的定位; 它是始终根据页面的正常流程定位：</p>
<div class="static">
这个div元素的位置为：static;
</div>
</body>
</html>
position:relative;
具有position:relative;相对于其正常位置定位的元素。设置相对定位元素的top，bottom，left和right属性将使其远离其正常位置
进行调整。其他内容不会被调整以适应元素留下的任何空白。
这个<div>元素的position:relative;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>position:relative的元素; 相对于其正常位置定位：</p>
<div class="relative">
这个div元素有position: relative;
</div>
</body>
</html>
评论0
最新资源