css绝对定位positon:absolute

最新推荐文章于 2024-03-04 09:25:34 发布

onlyoneLIJINGYI

最新推荐文章于 2024-03-04 09:25:34 发布

阅读量219

点赞数

分类专栏：网站前段文章标签： CSS absolute

本文链接：https://blog.csdn.net/onlyoneLIJINGYI/article/details/88751526

版权

网站前段专栏收录该内容

21 篇文章 0 订阅

订阅专栏

position 属性规定元素的定位类型。
默认情况下是static类型的，即没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
默认情况下：

<body>
<p >正常文字1</p>
<p >正常文字2</p>
<p >文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>
</body>

在这里插入图片描述
给文字3加上绝对定位之后效果如下图，设置了绝对定位的元素，相当于该元素从原文档中删除了，所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下之前文字3所在的位置。
注意：绝对定位是基于相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
下例中没有其他定位了的元素，所以”最近的一个定位了的父容器” 即body。

<style type="text/css">
p.abs{
  position: absolute;
  left: 150px;
  top: 50px;
  background-color:blue;
}
p{
  background-color:yellow;
  }
</style>
</head>
<body>
<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >绝对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>
</body>

在这里插入图片描述
下面一个例子：对于 “绝对定位的文字” 这个p，其定位了的父容器即 class=“absdiv” 的div ，所以 “绝对定位的文字” 这个p 出现的位置是以这个div 为基础的。

<style>
p.abs{
  position: absolute;
  left: 100px;
  top: 50px;
}
.absdiv{
  position: absolute;
  left: 150px;
  top: 50px;
  width:215px;
  border: 1px solid blue;
}
</style>
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
<div class="absdiv">
这是一个定位了的div
<p class="abs" >绝对定位的文字</p>
</div>

效果如图：
在这里插入图片描述

onlyoneLIJINGYI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css绝对定位positon:absolute

position 属性规定元素的定位类型。默认情况下是static类型的，即没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。默认情况下：<body>正常文字1正常文字2文字3<p...
复制链接

扫一扫

专栏目录