如何将绝对定位的元素与父级的父级对齐
如何将绝对定位的元素与父级的父级对齐
提问于 2017-10-07 21:11:10
我有以下导航场景：
导航栏是红色的，上面有一个导航li。蓝色区域是导航按钮的下拉菜单。下拉菜单是绝对定位的，因此与li元素的左边缘对齐。我想要的是下拉列表绝对定位，但在导航栏(红色容器)的左边缘对齐。
我已经尝试过left: 0，但由于某些原因，它在我的场景中不起作用。有没有其他方法可以让它与.navigation-bar对齐
它现在看起来是什么样子
它需要看起来像什么
回答 3
Stack Overflow用户
发布于 2017-10-07 21:15:26
尝试对ul应用边距:0和填充:0。
Stack Overflow用户
发布于 2017-10-07 21:15:40
实际上是li上的填充和边距在移动它。
尝试将此代码添加到.navigation-bar ul li选择器上的css中：
padding: 0;
margin: 0;最终输出：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body,
html {
padding: 0;
margin: 0;
}
.navigation-bar {
width: 100%;
display: block;
color: white;
background-color: red;
}
.navigation-bar ul li {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
}
.align-me {
position: absolute;
display: block;
width: 1080px;
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="navigation-bar">
<li>Navigation button</li>
<div class="align-me">I need to be aligned to .navigation-bar</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2017-10-07 21:16:51
正如pedram在评论中所说，您需要重置margin和padding属性。您可以编写ul { margin: 0; padding: 0; }，但最好的做法(我也一直在使用它)是使用*选择器重置所有元素的margin和padding。编写您的标记将会容易得多：
* {
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body, html {
padding: 0;
margin: 0;
}
.navigation-bar {
width: 100%;
display: block;
color: white;
background-color: red;
}
.navigation-bar ul li {
display: inline-block;
list-style-type: none;
}
.align-me {
position: absolute;
display: block;
width: 1080px;
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="navigation-bar">
<ul>
<li>Navigation button</li>
<div class="align-me">I need to be aligned to .navigation-bar</div>
</ul>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46620531
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号