html中的定位_html-js-css

概述 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .father{ background-color: red; width: 100px;

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