不理解第一个li的postion

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.banner > ul{

width: 1490px;

height: 300px;

margin: 0 auto;

position: relative;

}

.banner > ul > li{

width: 610px;

height: 300px;

overflow: hidden;

}

.banner > ul > li:nth-child(1){

width: 960px;

height: 460px;

border: 1px solid #fff;

position: absolute;

top: 37px;

right: 0px;

left: 0px;

z-index: 2;

margin: auto;

}

第一个 <li> 的position 设 top：37px 我能理解就是距离<ul>的顶部37像素，但是设 left：0，right：0 是什么意思呢？老师说有一个拔河效应，但是设定了宽高拔河效应应该失效的啊。。

而且要同时设置 left：0，right：0 ，margin：auto 才能居中。不知这3个是如何起作用的?

xurdy 2017-02-03

源自：HTML5网页布局 2-3 html5页面布局（表现层_banner）

37

收起

2回答

提问者 xurdy 2017-02-04 17:31:11

看下面吧！！

卡布琦诺 2017-02-03 10:24:12

绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。
而没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。望采纳~

提问者 xurdy #1

额，不太明白

2017-02-04 11:37:01
提问者 xurdy #2

是不是把包括 margin+盒子的尺寸一起绝对定位了？

2017-02-04 17:27:44
提问者 xurdy #3

我这样理解对不对：因为li 的 position 设定了 top: 37px、right: 0px、left: 0px; 而li 的尺寸（width:960px height:460px;）又小于他的父极 ul的尺寸（width: 1490px、 height: 300px），所以 li 设定margin：auto 会自动填充，以匹配position设定的值（也就是所谓的拔河效应）

2017-02-04 20:14:28

相似问题

不理解为什么是C，看了答案了，还是不理解

麻烦老师讲解一下1-5选择题的每一个答案

怎么选最后一个呢

我想问下否定选择器的使用方法，这里有些不明白

八分左右这个<li>\

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载