CSS定位

已于 2025-04-17 10:21:58 修改
阅读量1.1k 收藏 10
点赞数 30
分类专栏： HTML+CSS 文章标签： css 前端
于 2025-04-05 22:19:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/h3169929477/article/details/146981124
版权

文章目录

01-定位(position)

作用：灵活的改变盒子在网页中的位置，让两个标签压在一起显示，比如轮播图的切换箭头

实现：

1.定位模式：position

2.边偏移：设置盒子的位置，(注意：当使用百分比属性时都是相对于父级元素的)

  • left (使用百分比属性是相对父级的宽度)
  • right (使用百分比属性是相对父级的宽度)
  • top (使用百分比属性是相对父级的高度)
  • bottom (使用百分比属性是相对父级的高度)

相对定位

position: relative：是 CSS 中一种常见的定位方式，它允许元素相对于自身在文档流中的原始位置进行偏移，同时保留原始位置的空间。

不加定位

<!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>
    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>
<body>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    
  <div><img src="./images/1.webp" alt=""></div>
    
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
</body>
</html>

在这里插入图片描述

下面根据特点讲解

特点：

  1. 不脱标，占用自己原来位置，即使自己偏移，别人也不会占用自己的位置。

    <!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>
    * {
      margin: 0;
      padding: 0;
    }

  	div {
    	position: relative;
    	top: 100px;
  	}    
  </style>
</head>
<body>
  <p>.....</p>
  <div><img src="./images/1.webp" alt=""></div>
  <p>.....</p>
</body>
</html>

    在这里插入图片描述

  2. **显示模式(day04)**特点保持不变(该是块级还是块级，本身是行内块还是行内块),比如下图因为相对于自己偏移并且显示模式不改变，所以宽度在原来的基础上加长了200px，所以有了滚动条

  3. 设置边偏移则相对自己原来位置移动

    div {
  position: relative;
  top: 100px;
  left: 200px;
}

    在这里插入图片描述

  4. 关于百分比属性(重点)

    百分比是相对于父亲的宽高，若父亲没有指定宽高，top,或者right不生效。

    <style>	
	*{
       	margin: 0;
        padding: 0;
   	}
   	body{
      	height: 200px;
        /* 如果不设置，top相当于0px的50% 相对于父级元素，无论父级元素加不加定位*/
   	}
   	.box {
       	position: relative;
       	top: 50%;
       	width: 200px;
       	height: 100px;
       	background-color: pink;          
    }
</style>
<div class="box"></div>

    在这里插入图片描述

绝对定位(子绝父相)

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）,一般工作中都是绝对定位和相对定位一起使用

默认结构

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 400px;
    }

    .news {
      /*position: relative;*/
    
      margin: 100px auto;
      width: 400px;
      height: 350px;
      background-color: #f8f8f8;
    }

    /* 
      1. 脱标，不占位
      2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器 可视区 改位置
      3. 显示模式特点改变：宽高生效（具备了行内块的特点）
    */

    .news span {
      /*position: absolute;
      top: 0;
      right: 0;*/

      display: block;
      width: 92px;
      height: 32px;
      background-color: rgba(0,0,0,0.6);
      text-align: center;
      line-height: 32px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="news">
    <img src="./images/news.jpg" alt="">
    <span>展会活动</span>
    <h4>2222世界移动大会</h4>
  </div>
</body>
</html>

特点：

  1. 脱标，不占位, span脱离原本的位置 (在原来的位置进行浮动)。

    .father {
  position: relative;
  .....
}
.father span {
  position: absolute;
  ....
}

    在这里插入图片描述

  2. 显示模式具备行内块特点

    .father {
  position: relative;
}
.father span {
   /*position: absolute;*/

    /*display: block;注释后 width: 92px;仍然生效  说明相对定位具备行内块特点*/
    /*display: block;*/
    width: 92px;
    height: 32px;
    background-color: rgba(0,0,0,0.6);
    text-align: center;
    line-height: 32px;
    color: #fff;
}

  3. 设置边偏移则相对最近的已经定位的祖先元素改变位置

    .father {
  position: relative;
  ....
}
.father span {
  position: absolute;
  top: 0;
  right: 0;
  .....
}

    在这里插入图片描述

  4. 如果祖先元素都未定位，则相对浏览器可视区改变位置

    .father {
  /*position: relative; 注释后再右上角显示span  看相对浏览器可视区*/
  ...
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
  ...
}

    在这里插入图片描述

  5. 关于百分比属性(重点)

    <style>	
	*{
       	margin: 0;
        padding: 0;
   	}
   	body{
      	height: 200px;
        /* 和高度无关，祖先元素都未定位，则相对浏览器可视区改变位置 */
   	}
   	.box {
       	position: relative;
       	top: 50%;
       	width: 200px;
       	height: 100px;
       	background-color: pink;          
    }
</style>
<div class="box"></div>

    在这里插入图片描述

定位居中transform

在这里插入图片描述

实现步骤：

  1. 绝对定位
  2. 水平、垂直边偏移为 50%
  3. 子级向左、上移动自身尺寸的一半
  • 左、上的外边距为 –尺寸的一半
  • transform: translate(-50%, -50%)

注意下面的代码是相对于浏览器窗口，要想父盒子中的子盒子相对于父盒子居中显示，父盒子必须加相对定位。

div {
  position: absolute;
  left: 50%;
  top: 50%;

  /* margin-left: -265px;
  margin-top: -127px; */

  /* 方便： 50% 就是自己宽高的一半 */
  /* transform对元素进行变化  translate是水平垂直方向进行移动 */
  transform: translate(-50%, -50%);
}
<div class="box"></div>

为什么不使用相对定位呢，因为使用相对定位后top的百分比数据不生效，因为浏览器视口没有高度**(请看上面的相对定位)**。不利于设置其他布局。

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变 比如导航栏下滑不会跟着下滑

不加position: fixed

在这里插入图片描述

加入 position: fixed

在这里插入图片描述

特点：

  • 脱标，不占位

  • 显示模式具备行内块特点

  • 设置边偏移相对浏览器窗口改变位置

    div {
  position: fixed;
  top: 0;
  right: 0;

  width: 500px;
}

粘性定位

元素在未滚动到阈值时表现为 relative，滚动到阈值后变为 fixed

需指定 top、right 等阈值触发条件。

<style>
    *{
      margin: 0;
      padding: 0;
    }
    .header {
      background-color: pink;
      height: 40px;
      position: sticky;
      top: 0;
      /* 滚动到视口顶部时固定 */
    }
</style>
<div class="header"></div>
p{内容}*50

默认定位static

总结

属性显示模式是否脱标占位置边偏移(参照物)
position: relative保持标签原有显示模式否占位设置边偏移则相对自己原来位置移动
position: absolute行内块是不占位设置边偏移则相对最近的已经定位的祖先元素改变位置，如果祖先元素都未定位，则相对浏览器可视区改变位置
position: fixed行内块是不占位设置边偏移相对浏览器窗口改变位置 且 元素的位置在网页滚动时不会改变
属性文档流影响定位基准典型场景
static保持正常流无默认布局
relative保留原空间自身原始位置微调位置或作为父级参考
absolute脱离文档流最近的已定位祖先弹窗、菜单
fixed脱离文档流视口（或特定祖先）固定导航栏
sticky滚动时脱离视口阈值触发吸附式表头

堆叠层级z-index(加了定位属性才有效)

在这里插入图片描述

默认效果：按照标签书写顺序，后来者居上如下

在这里插入图片描述

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

在这里插入图片描述

定位元素inset

当position的值为absolute或者fixed时 通过inset精确控制元素相对于包含块的位置

inset: top right bottom left 单位是px

值说明

02-高级技巧

CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

在这里插入图片描述

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

在这里插入图片描述

实现步骤：

  1. 创建盒子，盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 添加 background-position 属性，改变背景图位置

​ 3.1 使用 PxCook 测量小图片左上角坐标

​ 3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）(0 -192px)

案例-京东服务

在这里插入图片描述

HTML结构

<div class="service">
  <ul>
    <li>
      <h5></h5>
      <p>品类齐全，轻松购物</p>
    </li>
    <li>
      <h5></h5>
      <p>多仓直发，极速配送</p>
    </li>
    <li>
      <h5></h5>
      <p>正品行货，精致服务</p>
    </li>
    <li>
      <h5></h5>
      <p>天天低价，畅选无忧</p>
    </li>
  </ul>
</div>

CSS样式

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  .service {
    margin: 100px auto;
    width: 1190px;
    height: 42px;
    /* background-color: pink; */
  }

  .service ul {
    display: flex;
  }

  .service li {
    display: flex;
    padding-left: 40px;
    width: 297px;
    height: 42px;
    /* background-color: skyblue; */
  }

  .service li h5 {
    margin-right: 10px;
    width: 36px;
    height: 42px;
    /* background-color: pink; */
    background: url(./images/sprite.png) 0 -192px;
  }

  .service li:nth-child(2) h5 {
    background-position: -41px -192px;
  }

  .service li:nth-child(3) h5 {
    background-position: -82px -192px;
  }

  .service li:nth-child(4) h5 {
    background-position: -123px -192px;
  }

  .service li p {
    font-size: 18px;
    color: #444;
    font-weight: 700;
    line-height: 42px;
  }
</style>
CSS之定位：边偏移 静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky，子绝父相的由来,绝对定位的盒子居中, 堆叠顺序
qq_44156869的博客
02-18 1908
为什么需要定位？ 某一个盒子可以自由的在一个盒子内移动位置，并且压住其他盒子。 当我们滚动窗口的时候，盒子的是固定屏幕的某个位置的。 为什么需要定位 以上效果，标准流或者浮动都无法实现，此时需要定位来实现。 所以： 浮动可以让多个盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 定位组成： 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式 +边偏移。 定位模式
CSS定位概要
weixin_46513985的博客
06-23 353
CSS定位概要
CSS五种定位方式详解
热门推荐
wshwsh_的博客
07-26 1万+
position 属性规定应用于元素的定位方法的类型。
CSS元素定位（学习笔记）
最新发布
m0_68637281的博客
03-18 1160
规定元素的堆叠顺序,取值越大，层级越往上。
css定位
jiangjuanjaun的博客
04-29 1000
参考文章：http://www.cnblogs.com/gaohuijiao/p/6371010.html                http://www.cnblogs.com/gaohuijiao/p/6369138.htmlCSS 有三种基本的定位机制：普通流、浮动和定位Position。影响元素定位的是浮动和Position。 在分析定位之前，理解一下行级元素和块级元素。行级元素：元素...
CSS的定位
qq_35518293的博客
09-07 457
文档流和脱离文档流 float 定位postion
CSS之定位
m0_74577714的博客
01-28 1705
定位在CSS当中是一个比较重要的点，接下来，让我为大家介绍一下定位吧！
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
html+css定位练习
08-05
总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
深入理解CSS定位与层叠
12-13
position：static(静态定位) 当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题。所以当没有定义position属性时，并不说明该元素没有...
CSS 定位
小白向前冲！
02-01 591
【1】 ——html中3种布局方式：    （1）标准流（顺序布局）： 元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。    （2）浮动 float ：    （3）定位 position ： 可选参数有 static 、absolute  、 relative 、 fixed 、 inherit     
css-定位
u014764290的博客
06-22 533
定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕的某个位置，并且可以压住其他盒子。。定位模式：静态定位（static）、相对定位（relative)、绝对定位（absolute)、固定定位（fixed）、粘性布局（sticky)。边偏移决定了元素的最终位置，有top、bottom、right、left四个属性，定义元素相对于父元素的距离。语法：选择器 { position：定位模式）
css子元素相对父元素进行定位
z7的博客
07-09 1万+
解决方案 在父元素中加入position:relative; 子元素中加入position:absolute; right:20px; 代码 html结构 <div id="div1"> <div id="div2"></div> </div> css #div1{ width:500px;height:500px; background-c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值