CSS 定位属性position

最新推荐文章于 2023-05-23 11:32:48 发布

凌冰_

最新推荐文章于 2023-05-23 11:32:48 发布

阅读量316

点赞数

本文链接：https://blog.csdn.net/hlx20080808/article/details/70209538

版权

一、position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。

有4种不同类型的定位:

①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

②relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。(一般很少用,浏览器不兼容!)

④static ：默认值；默认布局。

二、position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性：

①left ：表示向元素的左边插入多少像素，使元素向右移动多少像素。

②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。

③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。

④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。

上面属性的值可以为负，单位：px,%。

二、position属性的应用

<style type="text/css">
div {
	width: 100%;
	height:500px;
	border:1px solid gray;
	padding:10px;
/*	margin:10px;*/
}
.d1{
	width:100px;
	height:50px;
	border:1px solid green;
	/* 绝对定位: */
	<!--position:absolute;
	left:100px;
	top:150px;-->
}

.d2{
	width:100px;
	height:50px;
	border:1px solid green;
	background:#FCF;
}

</style>
</head>


<body>
<div>
  <div class="d1">div1_absolute</div>
  <div class="d2">div2</div>
</div>

(1)absolute 绝对定位:

(1-1)如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

效果:

(1-2)如果以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移.

.d1 {
	width:100px;
	height:50px;
	border:1px solid green;
	/* 相对定位:作为参考点 */
	position:relative;
	left:50px;
	
}
.d2 {
	width:100px;
	height:50px;
	border:1px solid green;
	background:#FCF;
	/* 绝对定位: */
    position:absolute;
	left:150px;
	top:150px;
}

效果:

(2)relative 相对定位:

无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。

.d1 {
	width:100px;
	height:50px;
	border:1px solid green;
	/* 相对定位:作为参考点 */
	position:relative;
	left:50px;
	top:50px;
	
}

效果:

综合应用:

<style type="text/css">
#pic {
	width:60%;   /*宽度*/
	position:relative;  /*参考点*/
	border:1px solid green; /* 边框*/
	padding:80px;
	margin:0px auto; /*  水平居中*/
}
.bno {
	position:absolute; /*绝对位置的偏移 */
	left:100px;
	top:90px;
}
.title {
	position:absolute;  /*绝对位置的偏移 */
	left:-12px;
	top:15px;
}
</style>
</head>

<body>
<div id="pic">
  <div class="title"><img src="image/bg_bang.gif" alt="title" /></div>
  <img src="image/book-01.jpg" width="260" height="260" />
  <div class="bno"><img src="image/bookNo1.gif" width="27" height="48" /></div>
</div>
</body>

效果: