css定位有哪几种方式

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

懒癌晚期5

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

阅读量975

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_45237729/article/details/104454650

版权

css的定位是用来解决文章的叠加排列的，例如视频网站中电视剧封面图片的独播、集数等，都是使用定位的方式进行排版。如下图
在这里插入图片描述 css的定位方式分为static、relative、absolute、fixed、sticky。

1.static（默认值）：没有定位。

2.relative（相对定位）
特点：
（1）如果没有定位偏移量，对元素本身并没有任何影响。
（2）不使元素脱离文档流，其空间会被保留。
（3）不影响其他元素的布局。
（4）定位其偏移量（left，top，right，bottom）是相对于元素本身进行偏移的。
例：当给当前元素设置position：relative ；left:20px时，其位置会相对于当前元素的位置向左偏移20px。
3.absolute（绝对定位）
特点：
（1）会使元素完全脱离文档流。
（2）是内联元素支持宽高；使块元素默认宽根据内容决定。
（3）生成绝对定位的元素，相对于定位（除了static的其他定位）的祖先元素进行偏移，若没有定位祖先元素，则相对于整个页面进行偏移。如果定义了多个祖先元素，生成绝对定位的元素相对于离其最近的祖先元素（父元素）进行偏移。
例：

html代码：

  <div id="box">
    <div class="box1"></div>
   </div>

css代码：

    <style>
     #box{background: red;border: 1px solid black;width: 200px;height: 200px;; }
        #box .box1{width: 100px;height: 100px;background: yellow；}
    </style>

运行出来的结果如下图
在这里插入图片描述
当给#box和.box1分别添加相对定位和绝对定位后：

<style>
        #box{background: red;border: 1px solid black;width: 200px;height: 200px;; position: relative;}
        #box .box1{width: 100px;height: 100px;background: yellow;position: absolute;top: 100px;left: 100px;}
    </style>

运行结果如下：
在这里插入图片描述
可以看到box1相对于其父元素进行了偏移。

4. fixed（固定定位）：
特点：
（1）使元素完全脱离文档里。
（2）使内联元素支持宽高；使块元素默认宽根据内容决定。
（3）相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响。
（4）不会受其祖先元素的影响。
例：
html代码

<body>
  <div id="box">
    <div class="box1"></div>
   </div>
   </body>

css代码

  body{height: 3000px;}
        #box{border: 1px solid black;width: 200px;height: 200px; }
        #box .box1{width: 100px;height: 100px;background: yellow;}

运行结果如下：
在这里插入图片描述
此时滑动滚动条时，整个box会跟随滚动条的滑动进行移动：

当给box1加个固定定位之后：
css代码如下：

   body{height: 3000px;}
        #box{border: 1px solid black;width: 200px;height: 200px; }
        #box .box1{width: 100px;height: 100px;background: yellow;position: fixed;}

运行结果：
在这里插入图片描述
可以看到，在给box1加了固定定位之后，box会随着滚动条的滑动而移动，box1却不会，会一直固定不动。

5. sticky（黏性定位）
特点：sticky相当于是static和fixed的结合体。给position：sticky；定义一个位置，在没滑到那个位置之前，和没有定位没有区别，但是当滑动到定义的位置之后，就产生了固定定位的特性。
例：
HTML代码：

<body>
    <div id="box">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p class="show">hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
   </div>
</body>

css代码：

  body{height: 3000px;}
     #box p{margin-bottom: 100px;}
      #box p.show{position: sticky;top: 100px;background: red;}

运行结果：
在这里插入图片描述
没有滑动到.show距离top100px的时候，跟没有设置定位没区别，都随着滚动条的滑动而移动。
当.show到达距离top100px的位置时：

《逆战班》

懒癌晚期5

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css定位有哪几种方式

css的定位是用来解决文章的叠加排列的，例如视频网站中电视剧封面图片的独播、集数等，都是使用定位的方式进行排版。如下图css的定位方式分为static、relative、absolute、fixed、sticky。1.static（默认值）：没有定位。2.relative（相对定位）特点：（1）如果没有定位偏移量，对元素本身并没有任何影响。（2）不使元素脱离文档流，其空间会被保留...
复制链接

扫一扫