确保相关元素内部的内容正常工作

Question

我对position: relative;有疑问。如果我使用它，那么它内部的所有内容都具有奇怪的宽度，并且它不会针对元素进行缩放。

更好地展示一个例子。在这里，我有一个简单的弹出式导航，当我将鼠标悬停在链接上时显示。

1. 我想导航到展示（不低于对方）

解决方案是使用JavaScript和悬停获得链接

我想要的导航项下进行正确定位下方链接的位置并将底层元素放置到正确的位置。我不太喜欢这种方法，所以我不知道是否有不同的方式。

你可以注释掉$(this).find('.container').css('left', left);行来查看我在说什么。

// I don't want to use JavaScript but it seems the only way 
 
$(function() { 
 
    $('.link').on('mouseover', function() { 
 
    var left = $(this).position().left; 
 
    $(this).find('.container').css('left', left); 
 
    }); 
 
}); 
 

 

 
// If .link will be "position: relative;" then the red blocks will be positioned wrongly (down) 
 
// If I use JavaScript then... ..well.. then I use JavaScript

.link { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 12px; 
 
    cursor: pointer; 
 
    /* position: relative; */ 
 
} 
 
.link:hover .container { 
 
    display: block; 
 
} 
 
.link .container { 
 
    position: absolute; 
 
    left: 0px; 
 
    margin-top: 112px; 
 
    display: none; 
 
} 
 
.link .container .box { 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="link"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="link"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    </div> 
 
</div>

小提琴：https://jsfiddle.net/qkgvrtnn/

Answer 1

您应该删除左：0像素;

.link .container { 
    position: absolute; 
    //left: 0px; 
    margin-top: 112px; 
    display: none; 
} 

这是造成该块在外侧容器的左侧被锁定，如果添加的相对位置。链接，它会正确对齐，但问题是，容器将继承其宽度....所以它不会有自动宽度，你想要的。

因此，您要么删除左边，并依靠最外面的容器宽度，或使用JavaScript，因为您需要有一个固定的.container宽度来实现此目的。