jsなしの範囲まで絶対要素の中心を設定する

Question

タイトルと内容を持つドロップダウンがあります。内容はタイトルに相対的なものでなければなりません場合はしか空いています。空の場所がない場合、コンテンツは親の境界線に抱かれているはずです。

私はDEMOを準備しました。二input[type="range"]は小さな値を持って国境を越えて

.dropdown { 
 
    position: relative; 
 
    left: 100px; 
 
} 
 
.dropdown_content { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 150px; 
 
    height: 200px; 
 
    margin-top: 15px; 
 
    background-color: white; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
}

<div class="container"> 
 
    <div class="dropdown"> 
 
    <div class="dropdown_button"></div> 
 
    <div class="dropdown_content"></div> 
 
    </div> 
 
</div>

今.dropdown_content山車：このデモは続く重要なコードを持っています。この動作は悪いです。私はこの場合、左のボーダーに抱きしめてほしい.dropdown_contentです。

望ましい結果

Answer 1

私は絶対位置の参照を削除：https://jsfiddle.net/v9amen50/。

これはうまくいくようです。

body { 
 
    margin: 20px; 
 
} 
 
.block { 
 
    margin-bottom: 10px; 
 
} 
 
.container { 
 
    display: flex; 
 
    padding: 20px 0; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
} 
 
.dropdown_button { 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
.dropdown_content { 
 
    display: block; 
 
    margin: 15px auto; 
 
    width: 150px; 
 
    height: 200px; 
 
    background-color: white; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
} 
 
.dropdown_content::before { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    height: 24px; 
 
    content: ""; 
 
    border-right: 10px solid transparent; 
 
    border-bottom: 10px solid #ccc; 
 
    border-left: 10px solid transparent; 
 
}

<div class="block"> 
 
    <input type="range" name="title" min="1" max="100" , value="5"> 
 
</div> 
 

 
<div class="block"> 
 
    <input type="range" name="position" min="0" max="500" , value="0"> 
 
</div> 
 

 

 
<div class="container"> 
 
    <div class="dropdown"> 
 
    <div class="dropdown_button"></div> 
 
    <div class="dropdown_content"></div> 
 
    </div> 
 
</div>