CSS: один абсолютный элемент внутри относительного (переместитесь вверх на div ниже) - PullRequest
Новая
       50

CSS: один абсолютный элемент внутри относительного (переместитесь вверх на div ниже)

0 голосов
/ 02 июля 2018

Я хочу увеличить высоту figcaption (в абсолютном выражении) на рисунке родительского наведения (в относительном выражении). Но он сдвигает div ниже. Но когда в контейнере два родителя (один и тот же блок), это работает http://jsfiddle.net/amaramar/fLa0xvgy/133/ как избежать смещения div ниже при наведении курсора?

Я хочу иметь это https://jsfiddle.net/amaramar/fLa0xvgy/160/, но только с одной статьей родителей и с хорошим css (ширина figcaption 100% его родителей. 

.item{
  
    position:  relative;
    width: 294px;
  
}
figure{
  display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 00px;
    -webkit-margin-end: 0px;
  width:100%;
  border: 1px solid black;
}
figcaption{
  background-color:red;
  height:3.2rem;
 
  line-height:1.6rem;
  overflow:hidden;
  
}
AnotherDiv{
  background-color:yellow;
}
.item:hover figcaption{
  min-height:3.2rem;
   height:auto;
  overflow:visible;
  position:absolute;
}
    <div class="container">
  <article class="item ">
    <figure class="cadre">
        <a href="#">
              <picture> 
                  <!--[if IE 9]><video style="display: none;"><![endif]-->
                  <!--[if IE 9]></video><![endif]-->
                  <img src="https://dummyimage.com/294x272/bf9d13/0d0c0d&text=Image'294x272">  
              </picture>
        </a>		
        <figcaption>
            <div class="dfitem-title">
                <a href="/pp45437/Artemide.html"title="ARTEMIDE">ARTEMIDE</a>
            </div>
            <div class="dfitem-desc">		
              <div class="typeProduit  "><a href="#">typeProduit</a></div>
                    <strong class=" reference" title="Title ">Title</strong>
              </div>
              <div class="prixContainerPosition dfitem-price ">
                <span>155$</span>
              </div>
                <div><a href="#"><button>buy</button></a></div>
        </figcaption>
    </figure>
  </article>
  <div class="AnotherDiv">
    <h1>AnotherDiv</h1>
  </div>
</div>
...