1. 爱优网络SEOM信息流营销首页
  2. 网站建设

关于CSS定位布局

css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置。

CSS定位布局

static

所有不设定定位的元素,定位方式都是static(缺省)
1. 不脱离标准流
2. 偏移不起作用:top right bottom left
3. 消除定位

relative(相对定位)

1. 不脱离标准流
2. 偏移起作用:top right bottom left,起始点从元素本来应该所在的位置的左上点
3. 不破坏标准流,把元素移动到需要的地方
relative+偏移 vs static+margin的区别?
relative只是移动了元素,但是标准流不受影响
margin虽然也满足移动元素,但是会影响标准

关于CSS定位布局
4. relative作为absolute的基准
5. 如果同时设定了left和right,只有left有效;如果同时设定了top和bottom,只有top有效。

absolute(绝对定位)

1. 脱离标准流,跟着滚动条一起滚动
2. 偏移起作用:top right bottom left

  • 没有任何一层的祖先节点有定位(relative,absolute,fixed),以浏览器的可视区为起始点
  • 父元素有定位(relative,absolute,fixed),以父元素的内角(border和padding的分界线)为起始点; margin对子元素定位有影响,padding,border对子元素定位没有影响
  • 如果有一个或者多个祖先元素有定位(relative,absolute,fixed),以最近的祖先元素的内角 (border和padding的分界线)为起始点

设定了position: absolute,没有设定left,top

  • 如果没有设定left和top,所有对元素能产生所用的因素全都起作用:注意,与top:0; left: 0;不等价,不设定left和top的情况,left和top被初始化为“应该在”的位置。
  • 如果left被设定,top没有:left按照设定,top按照“应该在”的位置。
  • 如果top被设定,left没有:top按照设定,left按照“应该在”的位置。

3. relative作为absolute的基准(父r子a)

absolute元素如何居中?

第一步,设定top,left为50%
第二步,通过margin-left,margin-top设定负值

fixed(固定定位)

1. 脱离标准流,不和滚动条一起滚动
2. 偏移起作用: top right bottom left
不受父元素的影响,只依据浏览器的可视区定位。
当一个元素被设定为固定定位时,会产生模式转换(行内块元素),所以如果开始没有设定宽度,设定后宽度为最小
面试题:能脱离标准流的:浮动,absolute,fixed
面试题:所有脱离标准流的动作,都会”如果开始没有设定宽度,设定后宽度为最小

叠放次序(z-index)

用于设定重叠元素的覆盖关系的
设定为一个数值,没有单位
数值越大,越靠上,可以覆盖数值小的元素
如果没有预先设定z-index,那么缺省是0,后定义的元素在新定义的元素之上。
设定z-index只对定位设定为relative,absolute,fixed三种元素有效,对标准流,浮动无效。

本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:https://www.aiyouseo.com/jianzhan/1720.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注