Css-定位元素(最详细解答）

最新推荐文章于 2024-05-29 22:48:09 发布

Rapper_cl

最新推荐文章于 2024-05-29 22:48:09 发布

阅读量563

点赞数 1

分类专栏： Css 文章标签： Css定位元素详解

本文链接：https://blog.csdn.net/m0_37510446/article/details/89919247

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

元素定位主要有5个不同属性：
static :静态属性，被该属性修饰的元素，其不会对该元素做任何操作，即使定义了left，top等元素，也不会生效，遵循文档流的正常流程

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
      #c0{
            color:blue;
            position:static;
            left:30px;
            top:30px;
         }
</style>
</head>
<body>
<h id="c0" >使用static静态属性定位，按照文档流的定位方式，即使配置了相关定位数据，也不会生效</h>
</body>
</html>

fixed:fixed定位，也就是比static多了一个功能，其定位的元素可以生效，在浏览器窗口中的位置保持不变，元素的位置相对于浏览器窗口是固定位置。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
      #c1{
            color:blue;
            position:fixed;
            left:30px;
            top:30px;
         }
</style>
</head>
<body>
<h id="c1" >使用fixed定位元素，位置与文档流无关，可以和其他元素重叠，其位置相对于浏览器窗口是固定位置，即使窗口是滚动的，它也不会移动，</h>
</body>
</html>

relative：相对定位，该相对定位元素是相对于其自己原始的位置，记住，是相对于自己之前的位置，会被其他元素所影响

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
      #c2{
            color:blue;
            position:relative;
            left:30px;
            top:30px;
         }
</style>
</head>
<body>
<h id="c2" >使用relative定位元素，其定位元素的设置是相对于自己原始的正常位置进行的定位，原始位置即按照文档流的正常位置，所以该定位元素定位的元素会收其他元素的影响</h>
</body>
</html>

absolute:绝对定位，该绝对定位元素是相对于离自己最近，且已经定位了的父元素，若无父元素，那么就相对与html的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
      #c3{
            color:blue;
            position:absolute;
            left:30px;
            top:30px;
         }
</style>
</head>
<body>
<h id="c3" >使用absolute定位元素，其定位元素相对于离自己最近的已定位的父元素，若无父元素，那么其会相对于HTML，其定位元素同样与文档流无关，可以和其他元素重叠 </h>
</body>
</html>

sticky:粘贴定位，所谓粘贴定位—基于用户的滚动位置来定位，也就是可以随情况进行变化的定位，在fixed和relative之间变动，当窗口滚动，页面快消失时，接下来的页面就是使用fixed 定位，其他时候，都是采用的relative相对定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>

      #c4{
            color:blue;
            position:sticky;
            left:30px;
            top:30px;
         }
</style>
</head>
<body>
<h>尝试滚动定位</h>
	<h>尝试滚动定位</h>
	<h>尝试滚动定位</h>
	<h>尝试滚动定位</h>
<h id="c4" >使用sticky定位元素，其定位元素可以随着特定阈值，在相对定位和固定定位之间来回转换，当在特定阈值之内时，为相对定位，当在特定阈值之外时，为绝对定位，模拟一个场景，在浏览器窗口定义一个sticky定位元素top,为10px，当该元素距离顶部大于10px时，为相对定位-相对自己按照文档流的位置为top 10px，当页面滚动到该页面距离顶部10px时，那么就会转换为fixed定位，相对浏览器窗口保持不变</h>
<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>
</body>
</html>

Rapper_cl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css-定位元素(最详细解答）

元素定位主要有5个不同属性：static :静态属性，被该属性修饰的元素，其不会对该元素做任何操作，即使定义了left，top等元素，也不会生效，遵循文档流的正常流程fixed:fixed定位，也就是比static多了一个功能，其定位的元素可以生效，在浏览器窗口中的位置保持不变，但是会被其他元素影响，其在页面的位置，即使浏览器窗口是滚动的，但是也不影响其位置relative：相对定位，该相对...
复制链接

扫一扫

专栏目录