码迷,mamicode.com
首页 > 其他好文 > 详细

position讲解

时间:2018-09-26 17:15:28      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:关系   设置   现象   div   结构   情况下   讲解   框架   层叠   

    Position(位置)

只要使用定位,必须要有一个相对的参照物。relative

具体定位的那个元素需要加position:absolute;(绝对的)。绝对的 :就是具体到某一个地方了,特别详细的意思。

 

使用绝对定位的时候,浏览器会逐层向上级元素找position属性,如果父级没有就会继续向上级查找position,一直到找到position为止,如果找不到就以body为相对位置。

   页面布局

1.结构层:搭我们的页面框架。

2.布局层:针对框架内部结构进行排版。

不需要使用浮动解决的问题尽量不用。

使用浮动之后会使该元素脱标

    div 盒子模型:

div标签就是一个容器,可以装任何标签。

1.        盒子实际占用的空间

 

2.        盒子的实际宽高和高度

 

3.        如何理解盒子模型

      Position细说

 

Position:relative;

 

Left:100px;

 

Top:100px;

 

Position:absolute;

 

Left:100px;

 

Top:100px;

 

Positionrelative;如果设置值了,相对原来的位置进行调整

 

二者区别

 

1.        absolute会脱离标准流,relative不会,relative虽然给值了,但是依然占有着原来的位置。

 

2.        Relative存在形影分离,所以一般情况下不建议添加值了,一般给子元素当参照位置,或者是元素的微调。

 

3.        Absolute 会有一种现象压盖效果。

 

Z-index层次关系,可以改变元素的层叠位置,所有的标签默认是0 z-index的值越大,该元素就在上方。

 

备注:以后我们做定位的时候,尽量保持子绝父相

 

Fixed 固定定位

 

Position:fixed;

 

脱离标准流的属性有哪些:float  position:absolute  position:fixed.

 

Positionstatic;静态

 

position讲解

标签:关系   设置   现象   div   结构   情况下   讲解   框架   层叠   

原文地址:https://www.cnblogs.com/yangzhiqiang/p/9707633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!