元素定位方式之-----CSS属性定位

最新推荐文章于 2023-07-26 08:43:28 发布

置顶 dzy15580807943

最新推荐文章于 2023-07-26 08:43:28 发布

阅读量700

点赞数 1

分类专栏： CSS3 文章标签： css html 网页设计

本文链接：https://blog.csdn.net/dzy15580807943/article/details/47256443

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面定位的方式有两种：浮动定位和属性定位，现在我要记录的是属性定位。

属性定位就是用 CSS 的position属性来给元素定位，这是一个不可以继承的属性。

语法格式：position:属性值

属性的取值为：

static ：设置元素按照HTML规定的规则进行定位（也就是文档流的方式）。

relative：设置元素将保持原来的大小偏移一定的距离。(相对定位)

absolute：设置元素将从页面元素中被独立出来，使用边偏移来定位。（绝对定位）

fixed：设置元素将从页面元素中独立出来，其位置不是相对于文档本身，而是相对于屏幕本身。

具有relative属性值的元素，其top、right、bottom、left四个方向的位置偏移是以该元素的原来位置作为参考点（相对于自己定位），而不是以父级元素或者body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙。如：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.mm{
		height:100px;
		width:100px;
		background-color:#999999;
		position:relative;
		margin:50px;
		}
	</style>
</head>

<body>
<div class="mm">relative</div>
<div class="mm">relative</div>
</body>
</html>

结果：

具有absolute属性值的元素的定位参考目标是具有relative相对定位属性值的父元素（如果父元素没有relative属性，则以body标记当做参考点）。该元素通过设置top、left、right、bottom来精确定位，并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素的尺寸足够的话）。absolute定位属性值，相当于从稳定流中抽取出来，浮动在原平面排版上，形成“层”，为解决多个层之间谁覆盖谁、谁在上谁在下的问题，就产生了 z-index 属性，值大的在上面。如：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.nn{
		height:100px;
		width:100px;
		background-color:#ff00ca;
		position:absolute;
		margin:50px;
		}
		.nnn{
		height:200px;
		width:200px;
		background-color:#1100ca;
		margin:50px;
		position:static;
		}
	</style>
</head>

<body>
<div class="nn">absolute</div>
<div class="nnn">static</div>
</body>
</html>

结果：

可以看出来设置了absolute属性值的正方形浮在了原平面排版上，并且产生的空隙被后面的元素填充了。

dzy15580807943

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素定位方式之-----CSS属性定位

页面定位的方式有两种：浮动定位和属性定位，现在我要记录的是属性定位。属性定位就是用 CSS 的position属性来给元素定位，这是一个不可以继承的属性。语法格式：position:属性值属性的取值为：static ：设置元素按照HTML规定的规则进行定位（也就是文档流的方式）。relative：设置元素将保持原来的大小偏移一定的距离。(相对定位)absolute：设置元素
复制链接

扫一扫