欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS Position

程序员文章站 2022-04-25 11:37:21
...

position 属性

position 属性指定了元素的定位类型。
position 属性的五个值：
static:默认值
relative:相对定位
fixed:固定位置
absolute:绝对定位
sticky：粘性定位

HTML实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>position</title>
<style type="text/css">
*{margin:0;padding:0;}
.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;overflow:hidden;}
.clearfix {zoom:1;}
.mgt20{margin-top:20px;}
.w1000{width:1000px;margin:0 auto;min-height:1900px;}

#demo{  
    position:relative;  
    border:1px solid #000;  
    margin-top:50px;
    top:-50px;  
    line-height:18px; 
} 
.static,.fixed,.absolute,.relative{  
    width:200px;      
}  
.relative{  
    position:relative;  
    left:150px;  
    top:-20px;  
    background-color:#ffe4e1;  
}
.static{   
    position:static; 
    background-color:#bbb;    
}  
.fixed{  
    position:fixed;  
    top:200px;
    left:50%;
    margin-left:-500px;
    background-color:#ffc0cb;
}  
.absolute{ 
    position:absolute;  
    right:10px;  
    top:10px;  
    background-color:#b0c4de;  
} 
</style>
</head>
<body>
<div class="w1000">
    <div class="mgt20 clearfix">
        <div id="demo" class="clearfix">  
            <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>  
            <div class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>  
            <div class="fixed">fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、"bottom" 属性进行定位。</div>  
            <div class="relative">relative1:对象不可层叠，对象原来占有的位置保留,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div> 
        </div> 
    </div>    
</div>
</body>
</html>

absolute绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位页面</title>
	</head>
	<style>
 
	div.pos_QM{
		position:absolute;
		left:100px;
		top:150px;
		width:200px;
		height:200px;
		background-color:black;
		color:white;
		text-align:center;
	}
	div{
		border:2px solid black;
	}
	</style>
	<body>
		<div class="pos_QM">
			这是一个绝对定位的盒子
		</div>
		<div>
			通过绝对定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离页面左侧100px,距离页面顶部150px.
		</div>
	</body>
</html>

取值

static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
sticky
盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

常见语法

static | relative | absolute | sticky | fixed
相关标签： CSS Position

上一篇： 递归相关内容

下一篇： 文档流定位

推荐阅读