html中father作用,html中的定位

待我称王封你为后i 2022-10-12 02:00 153阅读 0赞

![d3fb095aa3a7637782589c0408b9e2f7.png][]

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没有给定位,那么就会取相对浏览器而言,进行偏移,是不占有位置,完全脱离标准

![0cae10d6e9251375aa224f0b60716408.png][]

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

子绝父相

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

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

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

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

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

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

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

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

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

![f2743ce9b0939553df26480bfb8352d3.png][]

可以看到如图代码

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;

![ad-l.png][]

固定定位是不占有位置的

![5b0a962fcf3292207f0761890c7ecd94.png][]

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

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

[d3fb095aa3a7637782589c0408b9e2f7.png]: /images/20221005/72dbc54b2ddb4c51af77fadfeee116c6.png
[0cae10d6e9251375aa224f0b60716408.png]: /images/20221005/8fe8678fbb204c53a9c63cda433ddf71.png
[f2743ce9b0939553df26480bfb8352d3.png]: /images/20221005/c97784c145af4a9db099700d54ff05a1.png
[ad-l.png]: 
[5b0a962fcf3292207f0761890c7ecd94.png]: /images/20221005/34dc7342fc54456dbf228e7a731a940b.png