绝对定位 position:absolute，相对定位 position:relative

最新推荐文章于 2023-10-21 09:42:12 发布
最新推荐文章于 2023-10-21 09:42:12 发布
阅读量6.9k 收藏 5
点赞数 1
分类专栏： CSS 文章标签： positionabsolute positionrelative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fanbin168/article/details/44986585
版权

《1》

没有浮动的盒子是一个标准流，而浮动的盒子是一个非标准流 。

特别说明：
绝对定位是对离自己最近的那个非标准流盒子而言的。  （对一个盒子使用了浮动，相对定位，或者绝对定位，那么这个盒子就变成了一个非标准流的盒子了）


当我们要使用绝对定位的时候，必须要有两个条件
1》必须给父元素加定位属性，一般建议使用 position:relative(即：给父元素设为相对定位);
2》给子元素，加绝对定位position:absolute（给子元素设置为绝对定位）; 同时加方向属性（top ,left,rigth,bottom）

绝对定位是以父元素为基准点，进行定位（如果他没有父元素，或者它的父元素没有设置position:relative属性）它就会以<body>为基准点进行定位。绝对定位会脱离文档流(即：他浮动起来了，不再占据原来的位置了)

绝对定位

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
        }
        div {
            width: 100px;
            height: 100px;
        }

        #main {
        width:500px;
        height:500px;
        border:1px solid red;
        margin:0px 250px;
        
        }

        #a {
            background-color: red;
        }

        #b {
            background-color: green;
            top:100px;
            left:100px

        }

        #c {
            background-color: blue;
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
</body>
</html>


《2 给子元素添加绝对定位，不给父元素添加相对定位，那么子元素进行绝对定位就是以body为基准进行定位的》

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
        }
        div {
            width: 100px;
            height: 100px;
        }

        #main {
        width:500px;
        height:500px;
        border:1px solid red;
        margin:0px 250px;
        /*position:relative;*/ /*不给父元素设置相对定位，那么子元素就会以body为基准进行定位*/
        }

        #a {
            background-color: red;
        }

        #b {
            background-color: green;
            top: 100px;
            left: 100px ;
            
            position:absolute; /*给B设置绝对定位*/
        }

        #c {
            background-color: blue;
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
</body>
</html>


《3最终效果图，给父元素添加相对定位，给子元素添加绝对定位，那么子元素进行绝对定位就是以父元素为基准进行定位的》

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
        }
        div {
            width: 100px;
            height: 100px;
        }

        #main {
        width:500px;
        height:500px;
        border:1px solid red;
        margin:0px 250px;
        position:relative; /*给父元素设置相对定位，那么子元素进行绝对定位的时候就会以父元素为基准进行定位*/
        }

        #a {
            background-color: red;
        }

        #b {
            background-color: green;
            top: 100px;
            left: 100px ;
            
            position:absolute; /*给B设置绝对定位*/
        }

        #c {
            background-color: blue;
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
</body>
</html>

相对定位

相对定位是相对于自己原来的位置而言的

当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，

不对B盒子使用相当定位的时候B的位置（如下）

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 100px;
            height: 100px;
        }

        #main {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: 0px 250px;
        }

        #a {
            background-color: red;
            float:left;
            margin:10px;
        }

        #b {
            background-color: green;
            float: left;
            margin: 10px;
            /*position:relative;*/  
            /*top:120px;*/ 
            /*left:50px;*/ 
        }

        #c {
            background-color: blue;
            float: left;
            margin: 10px;
        }
    </style>
    
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>  
</body>
</html>

对B盒子进行相对定位的时候B的位置（如下）

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 100px;
            height: 100px;
        }

        #main {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: 0px 250px;
        }

        #a {
            background-color: red;
            float:left;
            margin:10px;
        }

        #b {
            background-color: green;
            float: left;
            margin: 10px;
            position:relative;   /*在这里我们使用了对#b元素的相对定位*/
            top:120px;  /*在原来的位置，向下移动120px （如果希望向上移动，则值就是负数，如：top:-120px）*/
            left:50px;  /*在原来的位置，向右移动50px (如果希望向左移动，则值就是负数，如:left:-50px)*/
        }

        #c {
            background-color: blue;
            float: left;
            margin: 10px;
        }
    </style>
    
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>  
</body>
</html>






无盐海
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位：relative相对定位、absolute绝对定位、fixed固定定位
m0_64460142的博客
04-08 4622
作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！ 定位使用position static 默认值，没有定位 relative 相对定位 ...
子类absolute相对父类不同position的定位
萌新_zackXiong_勇闯前端~
12-12 1439
在学习前端的时候遇到过一个问题: 当子类position为absolute时,父类的position 不同时子类会怎么定位. 直接上图好理解~ 灰色框框为祖父元素 position:relative 红色框框为父元素 position: absolute/relative/inherit/…. 蓝色框框为子元素 position :absolute       各种情况:...
CSS关于position布局覆盖及解决方案
qq_40825315的博客
03-14 1万+
先来介绍一下pastion的定位方式 1.两个div都没定位 <div style="width: 300px;height: 300px;background-color: yellow;"> 第一层 </div> <div style="width: 300px;height: 300px; background-color: blue;"> 第二层...
overflow与position:relative(absolut)冲突解决
weixin_59017683的博客
05-16 632
需求：项目中遇到展示一个列表鼠标移动上去在列表右侧展示对应行的相关信息，正常情况会直接对列表进行循环，并对列表进行overflow:auto;然后在列表中行中加左侧数据和右侧数据，对行进行相对定位，对右侧数据绝对定位。问题：overflow 生成了一个bfc，其层叠顺序的权重较高，position的absolute的权重不如它高。解决：对列表Overflow,然后当鼠标移动到对应行写右侧数据show的时候，用jQuery获取到行的所在位置，然后用jQuery对右侧数据设置样式。
position: relative;和position: absolute;冲突问题
zgwnDong的博客
07-29 667
在做小程序项目的时候，发现使用定位后页面和自己想的不一样，后来发现定位顺序这样会冲突： position: absolute; position: relative; 把顺序掉一下就没问题了： position: relative; position: absolute; ...
CSS position属性 中absolute和relative的相互作用的测试与总结
weixin_40312266的博客
10-04 498
本文目标：官方文档对相关功能的说明总是那么难以理解的，我们只好自己研究出规律。在本文，我们将测试出position属性 中absolute和relative作为父与子元素的属性的之间的相互作用，以此来理解relative和absolute的真正作用。 1，父元素relative，子元素relative 测试代码：一个relative属性的div包含着两个 relative属性的h2和两个re...
li标签的position:absolute与relative案例应用
12-13
今天在写一个购物车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个“修改地址”的功能，而且位于li标签的右边，于是就用到了，position：absolute； right：10px；这样把“修改地址”...
ie6下position：absolute不显示问题解决方法
09-25
`position: absolute`是CSS定位属性中的一个关键概念，它使元素脱离文档流，并根据最近的已定位祖先元素（如果存在）或者初始包含块进行绝对定位。在大多数现代浏览器中，这个属性都能正确地工作，但在Internet ...
position:relative/absolute无法冲破的等级
10-31
- **position:relative**：相对定位。元素相对于其正常位置进行定位，即相对于自身原来的位置偏移，不会脱离标准文档流，不影响其他元素布局。 - **position:absolute**：绝对定位。元素相对于最近的已定位祖先元素...
css position: absolute、relative详解
10-30
今天在看CSS的时候遇到了position: absolute、relative的问题，一直比较迷糊，今天终于搞清楚了。
CSS中的position:relative;的作用示例介绍
12-10
由于`div#demo`是相对定位，`div#sub`的绝对定位就会基于`div#demo`，而不是整个文档流。 了解这些基本的定位概念后，你可以更灵活地控制网页元素的布局。在实际的网页设计和开发中，`position`属性的运用是非常...
css中position:absolute与position:relative的使用问题
08-27 3567
问题描述： “如果用position来布局页面，父级元素的position属性必须为relative” 这一段经常在网上看到，一开始以为是官方标配，后面在学习的过程中有些疑问，故特意拿出来研究学习了下，发现并非如此，先说结论： 绝对定位的父级节点只要是relative、fixed、absolute其中一个即可实现容器内相对布局，以下是找到的资料印证的。（特别说明，两个position：abs...
position：relative
热门推荐
weixin_44874595的博客
07-30 4万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
Position属性之relative用法
evilcry2012的专栏
11-24 2万+
Position属性之relative用法 投稿：mrr 字体：[增加 减小] 类型：转载 时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat
position的五种定位方式介绍、实例演示
weixin_43183219的博客
12-25 5820
position的静态定位，相对定位，绝对定位，粘性定位，固定定位介绍及演示
position:relative的用法
波西塔塔博客
12-25 1万+
position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素… 比如要实现商品细节图展示的效果，可以使用如...
position:absolute相对哪个元素定位，那个元素要满足什么条件
welnee的博客
10-13 1167
1、position: absolute的元素会脱离页面中的文档流，相对于 static 定位以外的第一个父元素进行定位，父元素也要有定位position：relative或position：absolute
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
csgojingyu的博客
10-21 1万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
position: relative相对定位和绝对定位如何表示
最新发布
04-13
而绝对定位（position: absolute）是CSS中另一种常用的定位方式，它使元素脱离正常文档流，并相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。 绝对定位的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值