div의 하단에서 절대 위치

Question

텍스트 div에서 절대 위치 지정을 사용하여 텍스트 및 이미지를 겹치기를 원합니다.

HTML

<div id="article-txt"> 
</div> 

<div id="article-img"> 
</div> 

CSS

#article-txt { 
min-height: inherit; 
position: absolute; 
bottom: -50px; right: 0; 
} 

#article-img { 
display: block; 
position: relative; 
} 

나는 bottom: -50px;를 사용하고 있지만, 텍스트 DIV의 상단에서입니다. 텍스트 div의 하단에서 적용되도록하고 싶습니다. 높이가 동적입니다.

EDIT : 모든 텍스트가 아닌 텍스트 위에 텍스트를 표시하고 싶습니다. 부분적으로 이미지 위에 놓고 부분적으로 벗어나기를 원한다. (아래쪽 오른쪽 돌출부와 함께) 바닥에서부터 얼마나 많은 부분을 제어 할 수 있도록 하단에서 제어하려고한다.

Answer 1

간단히 대신 텍스트의 이미지를 생각하고, 이미지 margin-bottom:-50px에 추가 (하단과 동일 할 것이다 : -50px) 단순히 상대적인 위치, absloute의 필요없이 사용

를

.article-txt { 
 
    position: relative; 
 
    z-index:1; 
 
    font-size:35px; 
 
    font-weight:bold; 
 
    padding: 0 50px; 
 
} 
 
.article-img { 
 
    display: block; 
 
    position: relative; 
 
    margin-top:50px; 
 
    margin-bottom:-50px; /* control this value */ 
 
    z-index:0; 
 
}

<div class="article-img"> 
 
<img src="https://lorempixel.com/400/400/"> 
 
</div> 
 
<div class="article-txt"> 
 
ipsum dolor sit amet, consectetur adipiscing elit. 
 
</div> 
 

 
<div class="article-img"> 
 
<img src="https://lorempixel.com/300/300/"> 
 
</div> 
 
<div class="article-txt"> 
 
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ultrices elit. 
 
Nulla vel rhoncus dui.esent congue mi nibh, ut gravida tellus tincidunt at. Quisque commodo r 
 
</div>

Answer 2

정확하게 이해하기는 조금 어렵다. 당신이 달성하고자하는 것을 찾고 있지만 이미지 위에 텍스트를 표시하고 싶어하는 것처럼 보입니다. 이 경우 이미 스택 오버플로가있는 솔루션이 있습니다. here.

먼저이 솔루션에는 ID를 사용하지 않습니다. ID는 한 번만 사용할 수 있습니다. CSS 스타일을 웹 페이지의 다른 곳에서도 재사용 할 수 없습니다. 클래스를 재사용 할 수 있으므로 클래스를 id로 변경해야합니다. 위대한 기사 here은 두 가지 사이에 확실한 세부 사항을 제공합니다.

코드를 보면, 여기 당신이 취할 수있는 하나의 방향 :

CSS

img { 
    display: block; 
} 

.thumbnail { 
    position: relative; 
    display: inline-block; 
} 

.caption { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
    color: white; 
    font-weight: bold; 
} 

HTML이

<div id="box-search"> 
     <div class="thumbnail"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt=""> 
      <div class="caption"> 
       <h1>OATMEAL</h1> 
      </div> 
     </div> 
    </div> 

Answer 3

먼저 position:absolute 부모 요소 위치에서 위치를 복용 고려 때문이다. 스 니펫을 볼 수 있지만 그것이 당신을 위해 작동합니다 바랍니다. 당신이 많은 방법이 이것에 위해

#article-txt { 
 
min-height: inherit; 
 
position: relative; 
 
bottom: 70px; 
 
z-index: 100; 
 
width: 350px; 
 
padding: 4px; 
 
} 
 

 
#article-img { 
 
display: block; 
 
position: relative; 
 
}

<div id="article-img"> 
 
<a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a> 
 
</div> 
 

 
<div id="article-txt"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas libero vitae finibus blandit. Proin id tempus leo. 
 
</div>

Answer 4

https://jsfiddle.net/Liamm12/xsm93jjq/1/

, 여기에 간단한 하나

여기 코드의 레이아웃에 맞게 설정 한 후 margin-left 마이너스 display:flex을 사용하고 있어요 :

#content{ 
 
    display: flex; 
 
    position: absolute; 
 
    bottom: -50px; 
 
    right: 0; 
 

 
} 
 
#article-txt { 
 
    min-height: inherit; 
 
    font-size: 20px; 
 
    font-weight: 900; 
 
    margin-left: -17%; 
 
    color: black; 
 
    margin-top: 8%; 
 
}

<div id="content"> 
 
<div id="article-img"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_new.svg" width="70px"> 
 
</div> 
 
<div id="article-txt"> 
 
<span>Here's your text</span> 
 
</div> 
 
</div>