menu-list定位问题

menu-list相对于父级menu绝对定位，当没有设置left：0时，menu-list左边方向没有和menu对齐，为什么设置left后就对齐了？视频上讲和父级menu最左边padding位置对齐，宽度要包含padding-left吗？应该只是menu的宽度吧？
觉得需要设置left：-30px

源自：实战：挂号平台首页 4-3 首页.基本样式-模块-nav&header

收起

3回答

好帮手慕码 2019-05-08 12:50:54

同学你好！

在css中，父级设置相对定位，子级设置绝对定位之后子级设置left:0;就是回到父级最左侧显示。

只不过这里是有padding影响，所以才有了子级设置绝对定位但设置left：0;，子级默认是从content区域开始显示.

如果left:0;就是在定位元素的最左侧啦~

同学可以回过头再看一下元素定位的加深一下理解。

前端来说内容还是挺多的，不可能会一下子都讲完，需要同学在编程的过程一步一步理解填坑哦~

祝学习愉快~

好帮手慕码 2019-05-08 10:06:20

同学你好！

同学这个例子举得不是很明确，可以来看下我这个

(1)给父级设置了相对定位和padding时候，子级设置绝对定位不设置left值，子级默认是从content区域开始显示的

之后设置了left：0；值，那么子级就会回到父级的最左边显示了：

(2)给父级设置了相对定位和margin时候，子级设置绝对定位不设置left值，父级的margin是不会影响子级的。可能是老师昨天的表述不太严谨，太过笼统了，抱歉给同学造成了误解。

是这样的，父级设置了相对定位，子级绝对定位和margin的话，left：0；是不会使子级回到父级最左侧的（子元素margin影响子元素本身位置）。

同学很细心，指出了这个问题。同学很棒，继续加油~

祝学习愉快~

提问者 Leeluo #1

第一个例子：(1)给父级设置了相对定位和padding时候，子级设置绝对定位设置left：0，子元素就会回到父元素的最左边显示；这个以前好像没有讲过原理。。。

2019-05-08 12:41:58

好帮手慕码 2019-05-07 17:09:49

同学你好！

宽度不包含padding-left的宽度的，这个理解是正确的的~

（1）menu-list相对于父级menu绝对定位，当没有设置left：0时，menu-list左边方向没有和menu对齐，是因为受到父级padding的影响。

（2）同学首先要知道绝对定位如果不设置top/left的初始位置是会受父级的padding/margin影响的

如图,这是去掉left:0：

去掉父级的padding,这样他们就是对齐的

（3）因为left:0;是让它回到父级下面的起始位置，这里设置left:0;就可以了

同学试着理解一下~

如果帮助到了你欢迎采纳祝学习愉快~

提问者 Leeluo #1

1.有点搞不懂，设置left绝对定位是相对于他的父级元素定位的，为什么和父级元素的padding-left有关系？不知道为什么子元素设置left后会移动至父级元素padding的区域；如下代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ceshi</title> <style> .two{ width:100px; height:100px; background-color:red; position:absolute; left:0; } .one{ width:200px; height:100px; background-color:blue; margin-left:300px; position:relative; display:inline-block; } </style> </head> <body> <div class="one"> <div class="two"> sdf </div> </div> </body> </html> 2.如下代码：把padding-left，换做margin-left后，绝对定位并没有受到margin的影响，仍然是在父级元素最左边。这个和老师上面说的不一样 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ceshi</title> <style> .two{ width:100px; height:100px; background-color:red; position:absolute; left:0; } .one{ width:200px; height:100px; background-color:blue; margin-left:300px; position:relative; display:inline-block; } </style> </head> <body> <div class="one"> <div class="two"> sdf </div> </div> </body> </html>

2019-05-07 20:52:02