15、定位（Position）_青叶的全栈之路的博客-程序员秘密

技术标签： css  Web前端  定位  

定位（Position）

  • 相关概念
  • 定位组成
  • 使用

一、相关概念

1.1、什么是定位？

定位：将一个元素定在某一个位置（坐标）。

1.2、为什么要使用定位？

  1. 定位可以让多个块级元素在一行显示
  2. 定位可以让一个元素在某一个盒子内固定在任意位置，且可以覆盖其它元素。

二、定位组成

  定位由两个基本元素组成：定位模式（position）和边偏移（top、right、bottom、left），其中定位模式决定了元素在文档中的定位方式，而边偏移则决定了元素的最终位置（坐标）

2.1、定位模式（position）

  • static：静态定位（默认），即没有定位的意思，元素遵循标准流的摆放特性。且没有边偏移
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位

2.2、边偏移（top、right、bottom、left）

  • top：顶端偏移量，即元素距离其父元素上边线的距离
  • left：左侧偏移量， 即元素距离其父元素左边线的距离
  • bottom：底部偏移量， 即元素距离其父元素下边线的距离
  • right：右侧偏移量， 即元素距离其父元素右边线的距离

三、使用

3.1、相对定位（relative）

  1. 元素相对于其原先位置移动（参照点是自身原先的位置）
  2. 元素移动后，其原先在标准流中的位置继续保留，后面的元素仍以标准流的方式对待它（不脱标）
<body>
    <hr/>
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
</body>

#div1{
    
    width:200px;
    height: 100px;
    background-color: hotpink;
    position:relative;/*相对定位*/
    left: 100px;
    top: 50px;
}
#div2{
    
    width:200px;
    height: 100px;
    background-color: green;
}

在这里插入图片描述

3.2、绝对定位（absolute）

  1. 元素是相对于其父元素（有定位的父级元素）来移动位置的。（参照点是父元素）
  2. 如果元素没有父元素或父元素没有定位（position：static），则相对于浏览器来定位。
  3. 绝对定位不再占有原先标准流中的位置（脱标）
<body>
    <hr/><!--会影响红盒子的位置，不会影响绿盒子的位置-->
    <div id="outer1">
        <div>红盒子</div>
        绝对定位会脱离标准流<br/>
        不再占有原先标准流中的位置
    </div>
    <div id="outer2">绿盒子</div>
</body>

#outer1{
    
    position:relative;/*相对定位*/
}
#outer1>div{
    /*红色盒子*/
    width:200px;
    height: 100px;
    background-color: hotpink;
    position:absolute;/*绝对定位*/
    left:50px;
    top:50px;
}
#outer2{
    /*绿色盒子*/
    width:200px;
    height: 100px;
    background-color: green;
    position:absolute;/*绝对定位*/
    left:100px;
    top:100px;
}

在这里插入图片描述

3.3、固定定位（fixed）

  1. 以浏览器的可视窗口作为参照点移动元素。不受父元素和滚动条的影响
  2. 固定定位是脱离标准流的，不再占有原先标准流中的位置。
<body>
     <div>TOP↑</div>
     <p>固定定位会脱离标准流</p>
</body>

body>div{
    
    width: 100px;
    height: 200px;
    background-color: hotpink;
    text-align: center;
    position:fixed;/*固定定位*/
    left: 100px;
    top:100px;
}

在这里插入图片描述

3.4、定位的叠放次序（z-index）

在使用定位布局时，不可避免的会碰到盒子重叠的情况。为了控制盒子的叠放顺序，可以使用z-index属性来控制。

  1. 数值可以是正整数、负整数、0。默认是auto。数值越大，盒子越靠上
  2. 如果属性值相同，则根据元素在HTML文档中的位置，后来者居上
<body>
    <div id="div1">顶部盒子</div>
    <div id="div2">中间盒子</div>
    <div id="div3">底部盒子</div>
</body>

#div1{
    
    width:100px;
    height: 80px;
    background-color: blue;
    text-align: right;
    position:absolute;/*默认left:0   top:0*/
    z-index: 3;
}
#div2{
    
    width:200px;
    height: 140px;
    background-color: green;
    text-align: right;
    position:absolute;/*默认left:0   top:0*/
    z-index: 2;
}
#div3{
    
    width:300px;
    height: 200px;
    background-color: hotpink;
    text-align: right;
    position:absolute;/*默认left:0   top:0*/
    z-index: 1;
}

在这里插入图片描述

四、小技巧

4.1、绝对定位的盒子水平居中

  • 在绝对定位中使用margin:0 auto是没办法实现水平居中的
<body>
    <div id="outer">
        <div>水平居中</div>
    </div>
</body>

#outer{
    
    width:400px;
    height: 300px;
    border:2px solid black;
    position:relative;
}
#outer>div{
    
    margin-left: -40px;/*小盒子宽度的一半*/
    width: 80px;
    height: 60px;
    background-color: hotpink;
    position:absolute;
    left:50%;
    bottom:0;
}

在这里插入图片描述

4.2、固定到版心右侧

  1. positon：fixed
  2. left：50%
  3. top：随意
  4. margin-left：版心宽度一半
    代码（略）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dream_AI/article/details/107143486

智能推荐

PostgreSQL13.1-CN-v1.0中文手册.chm下载_postgre 中文手册怎么下载_瀚高PG实验室的博客-程序员秘密

PostgreSQL13.1-CN-v1.0中文手册.chmPostgreSQL数据库chm格式的中文官方手册，带目录和全文检索，内容与官方文档是一样的。下载地址1（包含chm，pdf，epub，html格式）：链接: https://pan.baidu.com/s/1Ii4t1STWT0GuUQl2k-mOTw 提取码: p7jm下载地址2：https://download.csdn.net/download/dove12345/20373622postgresql简称pg，原称postgre

VLC加载插件失败原因及解决_vlc播放器插件在浏览器中没反应_打补丁的狮子的博客-程序员秘密

最近做视频播放的程序，找到了VLC开源库，

【转】css3属性-webkit-font-smoothing_weixin_30929295的博客-程序员秘密

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。但是，我们可以用以下两种定义进行抗锯齿渲染-webkit-font-smoothing: antialiased; /*chrome、safari*/...

Html.Encode_weixin_34005042的博客-程序员秘密

&lt;%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApp2.Views.Home.Index" %&gt;&lt;asp:Content...

【基础】ABAP不同变量类型之间数值大小比较_sapchar类型的比较_SAP剑客的博客-程序员秘密

这个问题很容易被忽视，在这里写了一段代码分析一下三种情况：DATA:lv_num1 TYPE string.DATA:lv_num2 TYPE string.DATA:lv_num3 TYPE i.DATA:lv_num4 TYPE i.lv_num1 = '1000'.lv_num2 = '50'.lv_num3 = 20.lv_num4 = 60.*-->

Laravel5自动跳转到登陆前页面_wellchang的博客-程序员秘密

修改以下文件 /vendor/laravel/framework/src/Illuminate/Foundation/Auth/RedirectsUsers.php修改文件内容为<?phpnamespace Illuminate\Foundation\Auth;use URL;trait RedirectsUsers{ /** * Get the post register

随便推点

vue 从excel中复制数据至el-tabel中 excel粘贴数据 el-tabel_carlos.chang的博客-程序员秘密

需求：从excel复制数据快速粘贴到el-table中方法：利用vue的 @paste 拿到数据，用processData切割数据&lt;el-table :data="costList" element-loading-text="加载中" border="" fit highlight-current-row :max-height="'600px'" &gt; &lt;el-table-column

KVM专题（3）存储_weixin_34015336的博客-程序员秘密

KVM存储模式基于文件系统的存储dir:目录格式的存储fs:磁盘分区存储neyfs:网络共享文件存储基于设备的存储 Disk：物理硬盘存储Iscsi:iSCSITarget后端存储logical:逻辑卷的存储KVM支持的虚拟磁盘类型raw 这并非是一种真正的磁盘格式，而是代表虚拟机所使用的原始镜像 他并不存储元数据，因此可以作为保证虚拟机兼容性的候选方案。不支持快照和...

encode deencode_千本樱-夕颜xiyan10的博客-程序员秘密

source： http://blog.csdn.net/moodytong/article/details/8136258字符串编码常用类型：utf-8,gb2312,cp936,gbk等。python中，我们使用decode()和encode()来进行解码和编码在python中，使用unicode类型作为编码的基础类型。即     decode       

decode()和encode()_weixin_34122604的博客-程序员秘密

Python中，我们使用decode()和encode()来进行解码和编码在python中，使用unicode类型作为编码的基础类型。即 decode encodestr ---------&gt; unicode ---------&gt;stru = u'中国' #显示指定unicode类型对象ustr = u.encode('gb231...

encode,decode_weixin_30416871的博客-程序员秘密

encode 编码，以不同方式编码为bytes .encode('utf-8')decode 解码 .decode('utf-8')转载于:https://www.cnblogs.com/yuluhuang/p/3408324.html

Ping：超时还是不可达_weixin_33937913的博客-程序员秘密

http://quweiok.blog.51cto.com/1238134/494648 转载于:https://blog.51cto.com/acadia627/1104635

推荐文章

热门文章

相关标签