二、position定位

最新推荐文章于 2023-05-23 11:32:03 发布
最新推荐文章于 2023-05-23 11:32:03 发布
阅读量100 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kissing_yang/article/details/118528945
版权

用于在盒子模型中，使用不同的方式对盒子的位置进行修改

static- 默认值 静态的 不进行定位操作 忽略left right top bottom 属性

2.1 绝对定位absolute

absolute- 绝对定位 元素相较于第一个未设置position为static的父元素左上角的位置

父边框的粗细不会影响位置的数值，因为绝对定位是在父元素内边距与边框左上角作为定位的起始，父盒子的内边距会影响子元素的原始位置不会影响绝对定位,如果子盒子拥有外边距，那么实际距离为外边距左上角距离父元素内边距与边框左上角作为定位的起始，如果所有父标签都没有设置定位，那么会寻找最初包裹的标签进行定位html,元素设置位绝对定位后会自动设置为块级元素，绝对定位与浮动一样会脱离文档流让出位置造成遮挡

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

        .wrap {
            height: 500px;
            width: 500px;
            background-color: bisque;
            border: solid 10px black;
            position: absolute;
            padding-left: 100px;
            margin-top: 100px;
        }

        .inner {
            height: 100px;
            width: 100px;
            background-color: chartreuse;

        }
        .inner:hover {
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

2.2 相对定位relative

relative- 相对定位 与父元素定位方式无关，是相对于当前元素初始位置进行定位

相对于当前元素初始位置进行位置移动，并且初始位置不会让出，如果不进行移动不会遮挡其他元素，但是如果进行移动并且存在其他元素会进行遮挡

<!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>
       
        .wrap {
            height: 500px;
            width: 500px;
            background-color: bisque;
            border: solid 100px black;
            padding-left: 100px;
            position: relative;
            margin-left: 100px;
          
        }

        .inner {
            height: 100px;
            width: 100px;
            background-color: chartreuse;
            margin-left: 100px;
            position: relative;
        }
        .inner:hover {
             left: 100px;
             top: 100px;
        }
        .no {
            height: 500px;
            width: 500px;
            background-color: red;
        }
        .top{
           left: 100px;
        }
        .bottom{
            
        }
    </style>
</head>

<body>
    <div class="wrap top">
        <div class="inner"></div>
    </div>
    <div class="wrap bottom">
        <span class="inner"  >啥也没有</span>
    </div>
    <div class="no">

    </div>
</body>

</html>

绝对定位与相对定位异同点

绝对定位也可以看出特殊的相对定位，只不过与相对定位不同的是，绝对定位相对的是设置定位的父标签，相对定位相对的是当前标签起始位置

绝对定位会标签转换为块元素，相对定位不会

绝对定位会使标签脱离文档流让出位置，相对定位虽然也会脱离文档流但是不会让出位置

绝对定位与相对定位无论父标签怎么移动定位标签位置相对固定

绝对定位设置起始点为父标签内边距与边框交集左上角，相对定位起始点为当前标签盒子左上角(包含外边距)

2.3 固定定位fixed

将标签以当前视口进行固定定位设置

fixed- 固定定位，将指定标签固定在浏览器视口指定位置，脱离文档流让出原位置

<!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 {
            margin: 0;
            height: 100vh;
            width: 100%;
            background-color: lightgray;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
        }

        .fixed {
            width: 10vw;
            height:20vh;
            background-color: transparent;
            position: fixed;
            margin-left: 100px;
            right: 0;
            bottom: 0;
            border-radius: 20vh;
            border-bottom-style: solid;
            border-bottom-color: black;
        }
        
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    
</body>
</html>

2.4 粘性定位sticky

是相对定位与固定定位结合动态定位的方式

sticky- 粘性定位 一本用于拥有多级导航（对二级导航栏设置）时的页面，为保证页面滚动仍然可以使用导航栏进行跳转功能操作，默认情况下为相对定位，在原位置不进行修改，只有达到峰值（设置值）时，使用设置值转换为固定定位

<!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 {
            height: 100px;
            background-color: turquoise;
        }

        .stickyDiv {
            position: sticky;
            top: 0px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div class="stickyDiv">3</div>
    <div>4</div>
    <div class="stickyDiv">5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</body>
</html>

2.5 层叠属性

z-index:用于设置同层元素之间的层叠顺序，如果没有设置层叠顺序默认是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>
        body {
            margin: 0;
        }

        div {
            height: 200px;
            width: 200px;
            top: 0;
        }

        .abs {
            background-color: tomato;
            position: absolute;
            left: 20px;

        }

        .rel {
            background-color: thistle;
            position: relative;
            left: 50px;
            z-index: -1;
        }

        .fix {
            background-color: aquamarine;
            position: fixed;
          
            left: 80px;
            z-index: -1;
        }

        .left {
            background-color: antiquewhite;
            float: left;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div class="abs">绝对</div>
    <div class="fix">固定</div>
    <div class="left"> 浮动</div>
</body>

</html>

二、BFC

2.1 概念

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

核心：BFC内的元素与外的元素没有关联

2.2 BFC的特点

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

2.3 BFC的创建

只要满足如下任一条件即可创建BFC

  • 1、float的值不是none。

  • 2、position的值不是static或者relative。

  • 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

  • 4、overflow的值不是visible

2.4 BFC解决问题

2.4.1 解决margin重叠问题

因为属于同一个bfc的相邻box的margin会发生重叠，所以使用bfc解决重叠的方法很简单，只需要让其属于不同的BFC即可

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

        .wrap {
            overflow: hidden;
            background-color: crimson;
        }

        .inner {
            height: 100px;

        }

        .inner1 {
            background-color: darkgreen;
            margin: 10px 0;
        }

        .inner2 {
            background-color: darkkhaki;
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="inner inner1"></div>
        <!-- 将第二个使用 bfc包裹使其不在同一个bfc中 margin就不会重叠 -->
      <div  class="wrap">
        <div class="inner inner2"></div>
      </div>
    </div>
</body>
</html>

2.4.2 解决文字环绕问题

浮动的元素不会覆盖文字信息，会造成文字环绕，当然有时我们需要环绕的效果但是，有时我们需要完整的文字与元素显示这个时候就可以使用bfc解决这一问题

没有添加overflow: hidden之前

添加overflow: hidden之后

2.4.3 实现页面多栏布局

BFC不会让浮动的块遮盖，本身为块级元素，所以独占一行，可以使用这一特性完成页面的多栏布局

两栏布局

左侧宽度固定右侧自适应浏览器

将左侧设置为浮动，右侧设置为BFC，运用BFC不会被浮动遮挡的特性实现布局

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

        }

        .left {
            float: left;
            width: 30vw;
            height: 100vh;
            background-color: darkorange;
        }

        .right {
            overflow: hidden;
            height: 100vh;
            background-color: darkturquoise;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

三栏布局

左侧宽度固定右侧自适应浏览器

将左侧右侧设置为浮动，中间设置为BFC，运用BFC不会被浮动遮挡的特性实现布局

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

        }
        .left {
            float: left;
            width: 30vw;
            height: 100vh;
            background-color: darkorange;
        }

        .center {
            overflow: hidden;
            height: 100vh;
            background-color: darkturquoise;
        }

        .right {
            float: right;
            width: 30vw;
            height: 100vh;
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
    
</body>

</html>

2.4.4 清除浮动

overflow: hidden可以清除浮动，使在其内部的浮动块重新加入高度的计算，从而解决浮动导致的高度坍塌问题

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

        }


        .left {
            float: left;
            width: 30vw;
            height: 10px;
            background-color: darkorange;
        }

        .center {
            overflow: hidden;
            height: 100vh;
            background-color: darkturquoise;
        }

        .right {
            float: right;
            width: 30vw;
            height: 10px;
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
    </div>
</body>
</html>

杨691
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
008day（定位，下滑二级导航栏，测滑二级导航栏，定位中骰子的制作）
w296932099的博客
07-21 161
一、定位基础 一、定位基础 1、静态定位static（了解） 静态定位是元素的默认定位方式，无定位的意思 语法：position：static 静态定位按照标准流特性摆放位置，它没有边偏移 静态定位在布局时很少用到 2、相对定位relative（重要） 语法：position：relative 1⃣、相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型） 2⃣、原来在标准流的位置继续占有，后面盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置） 因此，相对定位
详述position样式属性(static relative fixed absolute)
IT_Helianthus的博客
05-20 822
文章目录一、static二、relative三、fixed四、absolute 文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。而position样式属性是用于定义建立元素布局所用的定位类型，该属性有多个属性值，主要有四个：static、relative、fixed、absolute。 一、static 默认值。没有定位，元素出现在正...
CSS中的position属性指定元素的定位方式
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-23 569
我们使用position属性可以灵活的控制页面布局，我们常用于制作悬浮菜单、弹出框等效果，但是如果我们过度的使用会导致页面太过混乱，从而影响了用户的体验感。
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5479
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
position属性absolute与relative 详解 不为人知的（fixed）绝对定位(fixed相对于浏览器窗口=不动的div)
服务好姐qa
12-02 9667
From：http://www.cnblogs.com/wiseblog/articles/4352007.html 总结： 当一个标签打上position：absolute绝对标签后，当我们使用TRBL属性时，他所参照的对象是带有absolute或relative标签的父级（无限），如果所有父级都没有absolute或relative打上标签，则以BODY左上角点为参照（一句
position定位
m0_62351590的博客
01-07 8617
position定位都有哪些: position的含义是指定位类型，取值类型可以有：static、relative、absolute、 fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。 1.position: static(默认） static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会
HTML5之position定位
weixin_40763897的博客
04-17 2945
position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，绝对定位或固定定位元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 position一般分为三种：绝对定位absolute，固定定位fixed，相对定位relative、静态定位static（默认） 1、position：relative 相对定位 采用相...
Position定位
weixin_52032313的博客
03-02 1198
定位
全面剖析CSS Position定位
09-24
帮助大家全面剖析了CSS Position定位，CSS Position前端必学必会的内容，感兴趣的小伙伴们可以参考一下
css position 定位
09-25
因此，要将一个`position: absolute`的元素放在父级元素内，必须同时满足两个条件：一是设置`top`, `right`, `bottom`或`left`，二是父级元素需要有`position`属性（通常是`relative`或`absolute`）。否则，元素将...
通过position定位实现div底端对齐
09-25
主要介绍了通过position定位实现div底端对齐，感兴趣的朋友可以参考下
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
CSS布局 0x2 position属性
cell的博客
03-12 173
position 属性指定了元素的定位类型。 position 属性的五个值：static,relative,fixed,absolute,sticky。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 static static是默认值。任意p...
asp档案管理系统的设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习
08-10
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习 简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考： 简历格式： 头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。 求职目标（可选）：简短描述您的求职意向和目标。 教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。 工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。 技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。 实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。 获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。 自我评价（可选）：简要描述您的个人特点、能力和职业目标。 兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。 参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。 简历内容模板： 姓名: 联系方式: 地址: 求职目标: （简短描述您的求职意
施耐德ATV61变频器编程手册
08-10
施耐德ATV61变频器编程手册
QorIQ LS1021A Reference Manual Supports LS1020A and LS1022A
08-10
Chapter 1 Overview 1.1 Introduction 1.2 Features summary 1.3 Application examples Chapter 2 Memory Map 2.1 Memory map overview Chapter 3 Signal Descriptions Chapter 4 Reset, Clocking, and Initialization Chapter 5 Interrupt Assignments Chapter 6 Arm Modules Chapter 7 CSU, OCRAM, and MSCM Chapter 8 Interconnect Fabric Chapter 9 Pre-Boot Loader (PBL) Chapter 10 Secure Boot and Trust Architecture Chapter 11 Supplemental Configuration Unit Chapter 12 Device Configuration and Pin Control
Springboot3+Vue3项目源码，彻底掌握Springboot3和Vue3
最新发布
08-10
Springboot3+Vue3项目源码，彻底掌握Springboot3和Vue3
smartSVN-所有版本的license，有效期到2099年
08-10
smartSVN-所有版本的license，有效期到2099年
元素position定位
07-28
元素的position属性用于定义元素在文档中的定位方式。常见的取值有： 1. static（默认值）: 元素按照正常的文档流进行定位，不会受到top、bottom、left、right等属性的影响。 2. relative: 元素相对于其正常位置进行定位，通过设置top、bottom、left、right等属性来调整元素的位置。相对定位不会影响其他元素的布局。 3. absolute: 元素相对于其最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于文档的body元素进行定位。通过设置top、bottom、left、right等属性来调整元素的位置。绝对定位会脱离正常文档流，不占据原有位置。 4. fixed: 元素相对于浏览器窗口进行定位，通过设置top、bottom、left、right等属性来调整元素的位置。固定定位会脱离正常文档流，不占据原有位置。 5. sticky: 元素在跨越特定阈值前为相对定位，之后为固定定位。通过设置top、bottom、left、right等属性来调整元素的位置。 这些position属性可以与其他属性（如z-index）结合使用，来实现更复杂的布局效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值