確保相關元素內部的內容正常工作

我對position: relative;有疑問。如果我使用它，那麼它內部的所有內容都具有奇怪的寬度，並且它不會針對元素進行縮放。確保相關元素內部的內容正常工作

更好地展示一個例子。在這裏，我有一個簡單的彈出式導航，當我將鼠標懸停在鏈接上時顯示。

我想導航到展示（不低於對方）

解決方案是使用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/

來源

2017-03-07 sed

[mcve]在你的問題。有了9K代表，你應該知道這一點。 – j08691

@ j08691有一個評論代碼/ CSS的小提琴。我沒有把代碼放在這裏的原因是因爲SO不支持SCSS。 – sed

我很清楚這一點。但是，如果jsFiddle消失了呢？或者是下降？或者被我公司的防火牆阻止？您的問題應該包含解決問題*所需的一切*，並且不應要求我們任何人訪問第三方網站以查看您的代碼示例。 – j08691

您應該刪除左：0像素;

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

這是造成該塊在外側容器的左側被鎖定，如果添加的相對位置。鏈接，它會正確對齊，但問題是，容器將繼承其寬度....所以它不會有自動寬度，你想要的。

因此，您要麼刪除左邊，並依靠最外面的容器寬度，或使用JavaScript，因爲您需要有一個固定的.container寬度來實現此目的。

來源

2017-03-07 15:04:27 skmasq

好吧，實際上我只需要移除'left：0px;'而沒有別的。 – sed

確保相關元素內部的內容正常工作

回答

相關問題