CSS样式表中的position属性取值和作用

最新推荐文章于 2023-06-04 22:15:25 发布

KELL

最新推荐文章于 2023-06-04 22:15:25 发布

阅读量2.2k

点赞数

分类专栏：初时

本文链接：https://blog.csdn.net/killdrogon/article/details/8490832

版权

初时专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、首先，我们大致看一下CSS样式中position属性的常用取值都有哪些：

从Dreamwaver给出的提示中我们可以大致了解到取值方式差不多有6种：

1. absolute绝对定位方式

2. fixed相对浏览器显示区定位方式

3. inherit继承父容器的定位方式

4. relative相对父级容器定位方式

5. static默认的定位方式，另称“无定位”

6. !important层叠样式表级联(可用来提升Class优先级)

我们主要关注于其中的3个：absolute、fixed、relative

二、我们看一下具体说明：

absolute：绝对定位。可通过“top”、“left”、“right”、“bottom”属性设置其在页面中的位置，类似坐标定位。且应用了“absolute”的元素会漂浮到其他未应用“absolute”、“float”等属性的元素之上，并且可以相互交叠；
fixed：相对浏览器的显示区域定位。功能有点类似漂浮广告，例如设置“left”属性值为“20px”则，滚动条向右滚动时，元素和浏览器显示区域的左边距一直固定为20像素，会跟随着滚动条自动向右移动；
relative：相对于父容器定位(相对定位)。可通过“top”、“left”、“right”、“bottom”属性设置其在容器中的相对位置，相对于父容器的左边，相对于父容器右边…
static：无定位。默认的布局方式，如果元素的position属性设置为“static”，则元素将不接受任何“top”、“left”、“right”、“bottom”属性的值。

三、按照排序我们看一下应用实例：

absolute

CSS代码：

#contianer{  /* 父容器*/
	background:#0F0;
	position:absolute;
	top:30px;
	left:50px;	
}

#sidebar{
	position: absolute;
	background: #F00;
	height: 80px;
	width: 200px;
	left: 9px;	/* 设置sidebar层对于body元素的做边距，可以认为是 X坐标 */
	top: 60px;	/* 设置sidebar层对于body元素的上边距，可看作 Y 坐标，负 Y 坐标*/
}

HTML代码：

<BODY>
	<div id="contianer">
    	外部容器
		<div id="sidebar">
    		内部容器绝对布局
    	</div>
    </div>
</BODY>

deamweaver中的效果，可直接调整位置和大小

从图中我们可以看出，内部红色的层并没有根据它的父容器（绿色的层）而改变位置。得出结论，应用了absolute 绝对布局的元素除 body 元素外不再有父容器，完全漂浮于空中。在Dreamweaver里面这个层已经能够用鼠标拖着到处摆放了，可以摆放到任何地方，并且可以像PowerPoint内的形状那样改变大小

relative

CSS代码:

#contianer{
	background:#0F0;
	position:relative;
	top:30px;   /* 父容器 Container 相对于 body元素的顶端间距设置为30个像素 */
	left:50px;	  /* 父容器 Container 相对于body元素的左边间距设置为50个像素 */
}

#sidebar{
	position: relative;
	background: #F00;
	height: 80px;
	width: 200px;
	left: 50px; /* 子元素 sidebar 相对于父容器 Container 左边的间距设置为 50个像素 */
	top: 30px; /* 子元素 sidebar 相对于父容器 Container 顶端的间距设置为 30个像素 */
}

HTML 代码：

<BODY>
	<div id="contianer">
		<div id="sidebar">
    		相对浏览器显示区布局
    		</div>
    	</div>
</BODY>

由图可见，内部的Div层会相对于它的父容器来布局，和绝对布局最大的区别是，绝对布局除了 Body 元素外，没有父容器。

fixed

CSS代码：

#sidebar{
	position: fixed;
	background: #F00;
	height: 80px;
	width: 200px;
	right: 50px;    /* 相对于浏览器显示区又边缘的固定距离 */
	top: 30px;     /* 相对于浏览器显示区上边缘的固定距离 */
}

HTML代码：

<BODY>
    <div id="sidebar">
    	相对浏览器显示区布局
    </div>
	
    <img src="cream.jpg" alt="wallpaper">
</BODY>

滚动条向下滚动之后

当滚动条向下滚动的时候，DIV元素会跟着滚动条滚动，样式中设置的相对与浏览器显示区的距离不会改变，很类似滚动广告。

以上就是常用的 postion 属性取值的效果。中间如有误解，还请指出，第一次写博文，考虑不周之处望大家见谅

KELL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表中的position属性取值和作用

一、首先，我们大致看一下CSS样式中position属性的常用取值都有哪些：从Dreamwaver给出的提示中我们可以大致了解到取值方式差不多有6种：1. absolute绝对定位方式2. fixed相对浏览器显示区定位方式3. inherit继承父容器的定位方式4. relative相对父级容器定位方式5. static默认
复制链接

扫一扫