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就可, 但是对于绝对定位就无效了

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

  1. 首先left 50% 父盒子的一半大小

  2. 然后走自己外边距负的一半值就可以了 margin-left。

 

 可以看到如图代码

fixed固定定位布局:

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

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

固定定位有两点:

  1. 固定定位的元素跟父亲没有任何关系,只认浏览器。

  2. 固定定位完全脱标,不占有位置,不随着滚动条滚动。

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

固定定位是不占有位置的

 

 

  

 

转载于:https://www.cnblogs.com/xiufengchen/p/11312379.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值