html中的定位

2019-08-06 22:56:50 阅读：201 来源： 互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            background-color: red;
            width: 100px;
            height: 150px;
            margin-top: 60px;
            margin-left: 50px;
           /* position: relative;*/

        }
        .son{
            /*子绝父相
            相对,占有位置,不脱标
            绝对定位 :不占有位置,托标
            */
            background-color: #33aa46;
            width: 55px;
            height: 60px;
            position: absolute;
            top: 40px;
            left: 30px;

        }
        .f1{
            background-color: #888888;
            width: 170px;
            height: 20px;
            margin-top: 30px

        ;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<div class="f1">

</div>

</body>
</html>

元素的定位属性主要包括定位模式和边偏移两部分。

边偏移:

top 顶端偏移量，定义元素相对于其父元素上边线的距离

bottom 底部偏移量，定义元素相对于其父元素下边线的距离

left 左侧偏移量，定义元素相对于其父元素左边线的距离

right 右侧偏移量，定义元素相对于其父元素右边线的距离

定位:postion

static 静态定位,默认模式

relative 相对定位,相对自己本身而言 ,进行偏移占位置的,例如图中的红色

absolute 绝对定位相对于父级而言,如果没有父级,那么就会去找父级的上级,最终会相对与浏览器而言,例如图中father没有给定位,那么就会取相对浏览器而言,进行偏移,是不占有位置,完全脱离标准

如果父级给了absolute,那么下面的div就上去,因为没有进maggin,所以就会出现上面情况,因为绝对定位不占有位置

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可，但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

首先left 50% 父盒子的一半大小
然后走自己外边距负的一半值就可以了 margin-left。

可以看到如图代码

fixed固定定位布局:

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            height: 44px;
            background: url(images/top.png) no-repeat top center;
            width: 100%;  /* 固定定位的盒子一定要写宽和高 除非有内容撑开不用写 */
            position: fixed;  /* 固定定位 */
            top:0;
            left:0;
        }
        .ad-l,
        .ad-r {
            position: fixed;
            top: 100px;
        }
        .ad-l {
            left: 0;
        }
        .ad-r {
            right: 0;
        }
        .box {
            width: 1002px;
            margin: 44px auto;
        }
        a{
            width: 40px;
            height: 15px;
            
            position: absolute;
            left: 0;
            bottom: 0;
        }
    
        </style>
    </head>
    <body>
    <div class="top"></div>
    <div class="ad-l"><img src="images/ad-l.png" ></div>
    <div class="ad-r"><img src="images/ad-r.png" alt="">
    </div>
    <div class="box">
        <img src="images/box.png" height="1760" width="1002" alt="">
    </div>
    </body>
</html>

固定定位是不占有位置的

标签：定位,浏览器,top,元素,html,margin,left
来源： https://www.cnblogs.com/xiufengchen/p/11312379.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html中的定位

子绝父相

绝对定位的盒子水平/垂直居中