CSS定位

最新推荐文章于 2022-10-03 19:55:37 发布

逝者如斯夫。

最新推荐文章于 2022-10-03 19:55:37 发布

阅读量61

点赞数

分类专栏： HTML +CSS 文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_60323200/article/details/119218631

版权

HTML +CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

定位模式

语法：

div { 
    position: static | relative | absolute | fixed | sticky;
   }

static 静态定位（默认值）
ralative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

静态定位（static）

默认值，无定位（标准流）

相对定位（ralative）

根据原来的位置移动
保留原来的位置（标准流）
经常搭配绝对定位一起用

absolute (绝对定位)

以最近一级带有定位的父元素进行移动
没有父元素或父元素没有定位，以浏览器为准
不占有原来的位置
父相子绝（因为父级元素需要占有位置，因此是相对定位，子盒子不需要占有位置，所以是绝对定位）
元素不随滚动条而移动
以浏览器的可视窗口作为坐标轴
不占有原来的位置

绝对定位水平垂直居中方法

(加了绝对定位的盒子不能通过margin: 0 auto水平居中)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位水平垂直居中</title>
    <style>
      .box {
        position: absolute;
        /* 1.left走50% 父容器宽度的一半 */
        left: 50%;
        /* 2.margin 负值 往左边走 自己盒子宽度的一半 */
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

固定定位（fixed ）

元素不随滚动条移动
以浏览器的可视窗口为坐标
不占有原先的位置

粘性定位（ sticky ）

使用场景：在某一位置开始变成固定定位
以浏览器的可视窗口为参照点移动元素（固定定位特点）
占有原先位置（相对定位特点）
必须添加top 、left、right、 bottom其中一个才有效

语法（选择器 {position: sticky; top: 10px;}）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 30000px;
      }
      div {
        /* 初始状态margin: 100px auto;当滚动到距离顶部0像素时开始变成固定定位 */
        position: sticky;
        top: 0;
        width: 800px;
        height: 50px;
        background-color: pink;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <div>我是导航栏</div>
  </body>
</html>

定位叠放次序 (z-index)

使用定位时，出现盒子层叠的情况，用z-index来控制摆放次序

语法规范：

div {
  z-index: auto (默认值) | 正整数 | 0 | 负整数;
}

数值越大，盒子越靠上
auto或者数值相同，后来者居上

定位拓展

定位的特殊性

绝对定位和固定定位也和浮动相似

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给高度或者宽度，默认大小是内容大小（原先块级元素不设宽度时宽度占满父级）
脱标的盒子不会触发外边距塌陷（浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题）
绝对定位（固定定位）会完全压住盒子【浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）】

逝者如斯夫。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS定位

定位模式语法：div { position: static | relative | absolute | fixed | sticky; }static 静态定位（默认值） ralative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位静态定位（static）默认值，无定位（标准流）相对定位（ralative）根据原来的位置移动保留原来的位置（标准流）经常搭配绝对定位一起用absol...
复制链接

扫一扫