html中father作用,html中的定位

Title

.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

;

}

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

边偏移:

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

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

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

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

定位:postion

static 静态定位,默认模式

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

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

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

子绝父相

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

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

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

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

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

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

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

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

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

可以看到如图代码

fixed固定定位布局:

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

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

固定定位有两点：

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

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

* {

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;

}

固定定位是不占有位置的

标签：定位,浏览器,top,元素,html,margin,left

来源： https://www.cnblogs.com/xiufengchen/p/11312379.html