你不知道的布局-定位（position）

最新推荐文章于 2024-09-15 21:53:51 发布
最新推荐文章于 2024-09-15 21:53:51 发布
阅读量82 收藏
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderlhj666/article/details/125316487
版权

你不知道的布局-定位（position）

一、标准流（Normal Flow）

  • 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

    • 从左到右、从上到下按顺序摆放好
    • 默认情况下，互相之间不存在层叠现象

  • 在这里插入图片描述

  • <!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>
    span {
      background-color: red;

    }

    div {
      background-color: #0f0;
    }
  </style>
</head>

<body>

  <span>我是span元素</span>
  <img src="./images/109951164163614977.jpg" alt="" srcset="">
  <span style="display: inline-block;">呵呵呵</span>
  <div>我是div元素</div>
  <span>我是span元素</span>
  <a href="#">百度一下</a>
  <div>哈哈哈哈哈</div>

</body>

</html>

二、margin-padding的位置调整

  • 在标准流里，可以使用margin、padding对元素进行定位
    • 其中margin可以设置负数
  • 但是有一个明显的缺点
    • 设置一个margin或者padding，通常会影响到标准流的其他元素定位效果
    • 不便实现元素层叠效果

三、如果我们需要跳出标准流，对一个元素进行定位呢？

  • 我们就可以使用position属性进行设置

(1)、认识元素定位

  • 定位允许你从正常的文档流中取出元素，使他们具有不同的行为：
    • 例如放在另一个元素上
    • 或者始终保持在浏览器的某一个位置上
    • 定位在开发中很常见：
    • 在这里插入图片描述

（2）、认识position属性

  • 利用position可以对元素进行定位，常用取值有5个：

    • 在这里插入图片描述

  • 默认取值是：

    • static：默认值, 静态定位

  • 使用下面的值, 可以让元素变成 定位元素(positioned element)

    • relative：相对定位
    • absolute：绝对定位
    • fixed：固定定位
    • sticky：粘性定位

（3）、静态定位-static

  • position的默认值
    • 元素按照normal flow布局
    • 设置left、top、right、bottom元素无效（没有用）

在这里插入图片描述

<!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>
    div {
      width: 100px;
      height: 110px;
      background-color: red;
      right: 0;
      top: 100px;
    }
  </style>
</head>

<body>

  <div>呵呵呵</div>

</body>

</html>

（4）、相对定位-relative

  • 元素按照normal flow布局

  • 可以通过left、top、right、bottom值进行定位

    • 定位参照对象是元素自己原来的位置

  • left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

    • 在这里插入图片描述

  • 相对定位的应用场景

    • 在不影响其他元素位置的前提下，对当前元素进行微调

  • 案例：使这图亮点位于中心

  • 在这里插入图片描述

  • <!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>
    .box {
      height: 489px;

      background: #f00;
      overflow: hidden;
    }

    .box img {
      position: relative;
      /* left: -960px; */
      /* translate 中的百分比相对于自己 */
      transform: translate(-50%);

      margin-left: 50%;
    }
  </style>
</head>

<body>

  <div class="box">
    <img src="./images/mhxy.jpg" alt="">
  </div>

</body>

</html>

（5）、固定定位-fixed

  • 元素脱离标准流（normal flow）脱标

  • 可以通过left、top、right、bottom值进行定位

  • 定位参照对象使视口

  • 当画布滚动时，固定不动

  • 小案例：

    • 在这里插入图片描述

    • <!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>
    .box {
      position: fixed;
      right: 10px;
      bottom: 10px;
    }

    .item {
      width: 80px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #999;
      color: #fff;
      cursor: pointer;
      border-radius: 8px;
    }

    .item:hover {
      background-color: #f00;
    }

    .top {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>

  <div class="box">
    <div class="item top">顶部</div>
    <div class="item bottom">反馈</div>
  </div>

</body>

</html>

（6）、绝对定位-absolute

  • 元素脱离narmal flow（脱标 脱离文档流）

  • 可以通过left、right、top、bottom设置定位

  • 定位参照对象是最邻近的定位祖先元素

    • 如果没有找到这样的元素，那就定位参照对象是视口

  • 定位元素（positioned element）

    • position值不为static的元素
    • 也就是position值为relative、absolute、fixed的元素

  • 子绝父相（这只是一种情况，关键的还是记住他的参照对象是谁）

    • 在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
    • 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
      • 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
      • 子元素设置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>Document</title>
  <style>
    .contenter {
      width: 500px;
      height: 400px;
      background-color: #f00;

      position: relative;
    }

    .box {
      width: 300px;
      height: 150px;
      background-color: #0f0;

      position: absolute;
      right: 0;
      bottom: 0;
    }
    span {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    img {
      width: 80px;
      height: 50px;
    }
  </style>
</head>

<body>

  <div class="contenter">
    <div class="box">
      <span>我是span元素</span>
      <img src="./images/diqiu.jpg" alt="">
    </div>
  </div>

</body>

</html>

（7）、粘性定位 - sticky

  • 另外还有一个定位的值是position: sticky，比起其他定位值要新一些

  • sticky是一个大家期待已久的属性;

  • 可以看做是相对定位和固定定位的结合体;

  • 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;

  • 会存在兼容性问题（以下是兼容的浏览器）
    在这里插入图片描述

  • 当达到这个阈值点时, 就会变成固定定位

  • sticky是相对于最近的滚动祖先包含视口的(the nearest ancestor scroll container’s scrollport )

  • 在这里插入图片描述

<!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>
    .nav {
      width: 100%;
      background-color: brown;
      /* position: fixed;
      top: 0;
      left: 0; */
      position: sticky;
      top: 0;
    }
  </style>
</head>

<body>

  <h3>我是标题</h3>
  <div class="nav">
    <span>电脑</span>
    <span>鞋子</span>
    <span>包包</span>
    <span>衣服</span>
  </div>
  <ul>
    <li>电脑列表1</li>
    <li>电脑列表2</li>
    <li>电脑列表3</li>
    <li>电脑列表4</li>
    <li>电脑列表5</li>
    <li>电脑列表6</li>
    <li>电脑列表7</li>
    <li>电脑列表8</li>
    <li>电脑列表9</li>
    <li>电脑列表10</li>
    <li>电脑列表11</li>
    <li>电脑列表12</li>
    <li>电脑列表13</li>
    <li>电脑列表14</li>
    <li>电脑列表15</li>
    <li>电脑列表16</li>
    <li>电脑列表17</li>
    <li>电脑列表18</li>
    <li>电脑列表19</li>
    <li>电脑列表20</li>
    <li>电脑列表21</li>
    <li>电脑列表22</li>
    <li>电脑列表23</li>
    <li>电脑列表24</li>
    <li>电脑列表25</li>
    <li>电脑列表26</li>
    <li>电脑列表27</li>
    <li>电脑列表28</li>
    <li>电脑列表29</li>
    <li>电脑列表30</li>
    <li>电脑列表31</li>
    <li>电脑列表32</li>
    <li>电脑列表33</li>
    <li>电脑列表34</li>
    <li>电脑列表35</li>
    <li>电脑列表36</li>
    <li>电脑列表37</li>
    <li>电脑列表38</li>
    <li>电脑列表39</li>
    <li>电脑列表40</li>
    <li>电脑列表41</li>
    <li>电脑列表42</li>
    <li>电脑列表43</li>
    <li>电脑列表44</li>
    <li>电脑列表45</li>
    <li>电脑列表46</li>
    <li>电脑列表47</li>
    <li>电脑列表48</li>
    <li>电脑列表49</li>
    <li>电脑列表50</li>
    <li>电脑列表51</li>
    <li>电脑列表52</li>
    <li>电脑列表53</li>
    <li>电脑列表54</li>
    <li>电脑列表55</li>
    <li>电脑列表56</li>
    <li>电脑列表57</li>
    <li>电脑列表58</li>
    <li>电脑列表59</li>
    <li>电脑列表60</li>
    <li>电脑列表61</li>
    <li>电脑列表62</li>
    <li>电脑列表63</li>
    <li>电脑列表64</li>
    <li>电脑列表65</li>
    <li>电脑列表66</li>
    <li>电脑列表67</li>
    <li>电脑列表68</li>
    <li>电脑列表69</li>
    <li>电脑列表70</li>
    <li>电脑列表71</li>
    <li>电脑列表72</li>
    <li>电脑列表73</li>
    <li>电脑列表74</li>
    <li>电脑列表75</li>
    <li>电脑列表76</li>
    <li>电脑列表77</li>
    <li>电脑列表78</li>
    <li>电脑列表79</li>
    <li>电脑列表80</li>
    <li>电脑列表81</li>
    <li>电脑列表82</li>
    <li>电脑列表83</li>
    <li>电脑列表84</li>
    <li>电脑列表85</li>
    <li>电脑列表86</li>
    <li>电脑列表87</li>
    <li>电脑列表88</li>
    <li>电脑列表89</li>
    <li>电脑列表90</li>
    <li>电脑列表91</li>
    <li>电脑列表92</li>
    <li>电脑列表93</li>
    <li>电脑列表94</li>
    <li>电脑列表95</li>
    <li>电脑列表96</li>
    <li>电脑列表97</li>
    <li>电脑列表98</li>
    <li>电脑列表99</li>
    <li>电脑列表100</li>
  </ul>

</body>

</html>

(8) 定位元素的特点（absolute、fixed）

  • position值为absolute或者fixed的元素

  • 可以随意设置宽高

  • 宽高默认由内容决定

  • 不再受标准流的约束

  • 不再严格按照从上到下、从左到右排布

  • 不再严格区分块级、行内级，块级、行内级的很多特性都会消失

  • 不再给父元素汇报宽高数据

  • 脱标元素内部默认还是按照标准流布局

  • position值为absolute或者fixed的元素来说

    • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
    • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

  • 如果希望定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性

    • left: 0、right: 0、top: 0、bottom: 0、margin:0

    • 在这里插入图片描述

    • <!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>
    .box {
      width: 500px;
      height: 300px;
      background-color: #f00;
      position: relative;
    }

    .contenter {
      /* width: 200px; */
      height: 100px;
      background-color: #0f0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: 0;

    }
  </style>
</head>

<body>

  <div class="box">
    <div class="contenter"></div>
  </div>

</body>

</html>

  • 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

    • left: 0、right: 0、top: 0、bottom: 0、margin: 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>Document</title>
  <style>
    .box {
      width: 500px;
      height: 300px;
      background-color: #f00;
      position: relative;
    }

    .contenter {
      width: 200px;
      height: 100px;
      background-color: #0f0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;

    }
  </style>
</head>

<body>

  <div class="box">
    <div class="contenter"></div>
  </div>

</body>

</html>

  • position值对比

    • 在这里插入图片描述
小林芝คิดถึง
关注
定位布局（position）
weixin_51047154的博客
04-18 3163
文章目录CSS定位布局（position）1.定位布局简介：2.固定定位fixeda.介绍:b.语法：c.说明：d.举例：效果展示：分析：2.相对定位relativea.介绍b.语法：c.说明：d.举例：效果展示： CSS定位布局（position） 1.定位布局简介： 2.固定定位fixed a.介绍: 当元素的position属性设置为fixed时，这个元素就被固定了被固定的元素不会随着滚动条的拖动而改变位置。在视野中固定定位的元素位置是不会改变的 b.语法： position：fixed； top：像
DIV+CSS布局-定位布局
qq_45383769的博客
04-17 975
DIV+CSS布局-定位布局 定位布局有三种定位方式： 相对定位 relative，绝对定位 absolute，固定定位 fixed。这三种定位各种有共通之处，当然也各有不同点。 1.相对定位：position:relative 相对定位就是相对于原来的位置产生偏移，比如现在指定了top和left都为0的情况下，表面它原本就是在这里了。 2.绝对定位：position:absolute 绝对定位默认放东西的位置是按照排版来的，这个时候看起来还正常。 但是绝对定位实际上的位置是在页面最开头来定位的。比如我
CSS - 定位布局（position）
程序员阿甘的博客
07-20 2230
浮动布局的不足、定位模式和边偏移、静态定位、相对定位、z-index、层叠上下文、Stacking Context、包含块、Containing block、绝对定位、子绝父相、水平垂直居中、margin:auto、固定定位、版心右侧、视觉视口、布局视口、连续媒体、分页媒体、粘性定位、滚动机制............
CSS 布局 - position 属性：绝对定位和相对定位
sunshine__sun的博客
06-27 2097
position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。 一、position：static；（静态） 默认情况下是静态定位，静态定位的元素不受 top、bottom、left 和 right 属性的影响。 position: static; 始终根据页面的正常流进行定位； 二、position: relative;（相对定位） 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正.
HTML样式布局css属性之position定位
youyanh的博客
08-10 1457
属性：position（定位） 上图是官方的介绍，在实际使用的时候可以通过提示看到还有许多的值可选，例如：-ms-page、-ms-device-fixed、-webkit-sticky、initial、sticky、unset等。 1、fixed(英译：固定的)：在官方的介绍中其位置是相对于浏览器窗口来定位的。注意的是当你在元素中使用了该值来定位，它的位置使用left、top、right...
前端布局-Position详解
04-27
- **是否占据空间**：相对定位的元素仍然占据文档流中的空间，而绝对定位的元素则不占据任何空间。 - **定位基准**：相对定位是相对于元素原本的位置进行偏移；绝对定位则是相对于最近的已定位祖先元素进行定位。 - ...
网页布局绝对定位(position)轻松简单
12-10
要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。 使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为...
CSS之定位布局 -- position：relative/absolute/fixed/sticky
qq_48802092的博客
07-27 436
特点默认文档流定位---positionstatic;
CSS之定位布局(position，定位布局技巧)
11-21
你可以将弹出框的容器设置为`position: relative`，然后让弹出框本身设置为`position: absolute`，这样就可以轻松地将其定位在相对于容器的任何位置，而无需考虑整个页面的布局。 总之，CSS定位是构建网页布局的...
css基础5-定位布局-装饰
12-05
CSS定位是网页设计中至关重要的一个部分，它允许开发者精确控制元素在页面上的位置，解决元素间的重叠问题，以及创建各种复杂的布局效果。在网页布局中，定位主要有以下几种方式： 1. **标准流（Static Positioning...
制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格
m0_61118741的博客
09-12 1476
通过使用 HTML 和 CSS3 的新特性，我们成功打造了一个充满动感、炫酷十足的个人网页。你可以根据自己的喜好继续添加更多效果，比如动画按钮、背景视频等。炫酷设计的背后，是 CSS3 强大的功能。如果你希望让网页更加动感和富有层次感，不妨尝试更多 CSS3 的特性，让每个访问你网页的人都能眼前一亮！
CSS —— 界面布局
m0_73557953的博客
09-10 1049
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
CSS——盒子模型
m0_73557953的博客
09-12 392
margin : auto => 让target元素左右两边的margin都占据尽可能多的空间，就会各占一半，使元素居中。水平方向：margin-left : auto => 让target元素左边的margin占据尽可能多的空间，使元素靠右。首先CSS将所有的元素都看成一个盒子。
CSS 常用元素属性
2301_79881188的博客
09-11 1034
CSS 属性有很多, 可以参考文档。
响应式CSS 媒体查询——WEB开发系列39
最新发布
一条晒干的咸鱼的博客
09-15 1295
CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2412
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1236
讲解CSS中的一般布局以及浮动布局
unocss 一直热更新打印[vite] hot updated: /__uno.css
Rverdoser的博客
09-12 498
请注意，如果 __uno.css 是一个正在生成的文件，并且正在被热更新，这通常是预期内的行为。查看 unocss 文档：查看 unocss 的官方文档，看是否有其他用户遇到类似问题，或者是否有相关的解决方案。确认代码变更：首先确认你的代码中是否有对 unocss 相关的变更，如果有，这是正常的热更新行为。查看 Vite 日志：如果问题依然存在，查看 Vite 的详细日志，可能会有更多的线索。检查 unocss 配置：确保 unocss 的配置是正确的，没有配置错误导致的问题。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 650
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
CSS定位布局详解：position属性与包含块
在CSS中，定位布局是网页设计中不可或缺的部分，它允许开发者精确控制元素在页面上的位置。本文将深入探讨CSS的定位属性，特别是`position`属性，以及如何理解定位元素的包含块。 一、定位属性 `position`属性是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值