絶対位置要素

Question

トリガの数に基づいてIクリックflexboxリストについては、次の形式、の各項目は、隠されたdiv要素を明らかにしてい：

<ul class="items definitions"> 
     <li class="list__item closed" data-gk-close-span-glyph="active" data-gk-open-span-glyph= 
     "closed" data-gk-open-class="3" data-gk-area-state="closed">Thing One</li> 

     <li style="list-style: none"> 
      <div class="response-definition 3" style="display: none;"> 
       <p>One Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
      </div> 
     </li> 

問題は、私はとポジショニングを残せばstatic、明らかにされたdivはflexboxリストの項目を置き換えます。私は隠しdivsがulリスト自体に対して隠されたdivを配置する位置に残っているように見えるリスト項目の子であることは望ましくありません。

これはpen for what I'm dealing withです。

リスト項目の数に基づいてdivの位置を変更する方法はありますか？このようなもの？

@for $i from 1 through length($mylist) { 
    li:nth-of-type(#{$i}) { 
      top: $i * 5em; 
    } 
} 

これは、列の数が変更されるたびに、メディアクエリごとに異なる必要もあります。

Answer 1

私は、デモ用の最初の4つの要素をマークアップ方式で更新しました。つまり、私のデモで残りの部分が一時的に壊れていますが、これに基づいて動作することがわかります。残りのアイテムも削除してからCSSを少しきれいにすることができました。

私が行った変更：これらを削除

.active, .closed { 
    cursor: pointer; 
    font-size: 1.4rem; 
    list-style: outside none none; 
    padding: 1rem; 
    width: 100%; 
    text-align: left; 
} 

.response-definition { 
    max-width: 95%; 
    position: absolute; 
    background: black; 
    z-index: 1000; 
    margin-top: 10px; 
    //left: 20px; 
    } 

.list__item .btn:hover, .list__item .btn:hover:focus 
{ 
    background: rgba(0, 0, 0, 0.15); 
    transition: all 1s; 
    color: tomato; 
} 

：

<li class="list__item active" data-gk-close-span-glyph="active" data-gk-open-span-glyph= 
    "closed" data-gk-open-class="8" data-gk-area-state="closed">Thing Six</li> 

<li style="list-style: none"> 
     <div class="response-definition 8" style="display: none;"> 
     <p>Six Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna urna, pretium eu 
     pretium in, dictum nec nisl. Proin vehicula convallis mi, in vestibulum magna laoreet eget. 
     Duis quis dignissim nibh, at aliquet elit. Mauris ultrices a sapien quis hendrerit. 
     Pellentesque in nisi dui. Pellentesque commodo diam sapien, eget egestas elit rutrum 
     sodales. Etiam sapien nisi, pretium eu consequat ut, sollicitudin vitae erat.</p> 
     </div> 
</li> 

新しいリスト項目の構造：

<li class="list__item"> 
     <button class="btn active" data-gk-close-span-glyph="active" data-gk-open-span-glyph= 
    "closed" data-gk-open-class="4" data-gk-area-state="closed">Thing Two</button> 

     <div class="response-definition 4" style="display: none;"> 
     <p>Two Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna urna, pretium eu 
     pretium in, dictum nec nisl. Proin vehicula convallis mi, in vestibulum magna laoreet eget. 
     Duis quis dignissim nibh, at aliquet elit. Mauris ultrices a sapien quis hendrerit. 
     Pellentesque in nisi dui. Pellentesque commodo diam sapien, eget egestas elit rutrum 
     sodales. Etiam sapien nisi, pretium eu consequat ut, sollicitudin vitae erat.</p> 
     </div> 
</li> 

はまた、CSSを修正

.response-definition:nth-of-type(1) { 
    //top: 5em; 
} 

.response-definition:nth-of-type(2) { 
    //top: 10em; 
    } 

をあなたはすべてを変更したら

あなたはおそらくこれを変更することができます：

.items .list__item { 
    background: #e0ddd5; 
    color: #171e42; 
    box-sizing: border-box; 
    margin-left: -10px; 
    margin-right: 20px; 
    list-style: none; 
} 

へ：

ここ

.items .list__item { 
    margin-left: -10px; 
    margin-right: 20px; 
    list-style: none; 
} 

がcodepenです： http://codepen.io/anon/pen/MebMQg