html中的定位

最新推荐文章于 2023-08-30 20:03:26 发布

weixin_30404405

最新推荐文章于 2023-08-30 20:03:26 发布

阅读量205

点赞数

原文链接：http://www.cnblogs.com/xiufengchen/p/11312379.html

版权

<!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>