존재 여부에 관계없이 이미지 위에 텍스트를 놓으십시오.

존재하지 않는 경우 데이터베이스 또는 동일한 위치에 이미지가있는 경우 텍스트를 배치하려고합니다.존재 여부에 관계없이 이미지 위에 텍스트를 놓으십시오.

문제는 이미지가 있으면 그 아래에 텍스트가 표시되고 거기에 없으면 텍스트가 첨부 된 그림에 설명 된대로 정확한 위치로 이동한다는 것입니다.

<div class="category"> 
    <img src="home.php?cat={$mc.categoryid}"/> 
    <div class="title"> 
     <h2>Some text</h2> 
    </div> 
</div>

내가의 라인을 따라 뭔가하고 싶은 : 코드는 다음과 같습니다

<style> 
.category{ 
    width: 400px; 
    height: 400px 
} 

.title { 
    position: relative; 
    top: 3px; 
    left: 0; 
    width: 100%; 
    height: 50px; 
} 
</style>

출처

2013-04-26 Ka Ra

이미지와 텍스트 모두 position:absolute이 있는지 확인을하고 .category 함께, position:relative있다 텍스트의 z-index은 이미지의 텍스트보다 높습니다.

출처

2013-04-26 01:53:06 imsky

이미지에는이 작업을 수행하기 위해'position : absolute'가 필요하지 않습니다. – daamsie

@daamsie 그게 맞아. – imsky

컨테이너에 categorypositionrelative을 제공하십시오. 그런 다음 의 absolute을 .title으로 지정하십시오. position:absolute은 정상적인 콘텐츠 흐름에서 할당 된 값을 사용합니다. 컨테이너의 position:relative;은 position:absolute 요소를 해당 공간 안에 유지합니다. 하지만 원하는 위치로 이동할 수는 있습니다. 당신이 .title가 오른쪽 하단에 표시해야 할 경우, 스타일을 적용 그래서 같은 right:0 및 bottom:0

Fiddle

출처

2013-04-26 01:53:58

-1

는이 일을 여러 가지 방법이있다. 이런 고정 된 폭과 높이를

<div class="category"> 
    <img src="home.php?cat={$mc.categoryid}"/> 
</div> 
<div class="title"> 
    <h2>Some text</h2> 
</div>

방법 2 또 다른 DIV 내부의 이미지를 포함하고 수득 :

방법 1이 같은 「카테고리」DIV의 "제목"외부 가져와

<div class="category"> 
    <div style="width:xx; height:yy;"> 
     <img src="home.php?cat={$mc.categoryid}"/> 
    </div> 
    <div class="title"> 
     <h2>Some text</h2> 
    </div> 
</div>

위의 경우 이미지에 할당하려는 양에 따라 xx 및 yy에 대한 고유 한 값을 사용합니다. 물론 인라인 CSS 일 필요는 없습니다. 다른 수업을 들려 줄 수 있습니다.

출처

2013-04-26 01:59:42 itsols

'.title'을 정상적인 흐름에서 벗어나게하면 텍스트가 항상 그림보다 위에있게하고 싶을 때 텍스트가 항상 아래에있게된다. –

@CodyGuldner 그의 질문을 이해하기 위해 노력했다면, "올바른 위치"는 이미지 아래에 있습니다. 그래서 나는 그 질문에 대답했다고 믿는다. 그리고 CSS 나 html에 대한 기본적인 지식을 가지고 있다면, 제목이 이미지 위에 있도록하려면 포함 된 div를 맨 위로 이동하면 문제가 해결된다는 것을 알아야합니다. 그럼 다시 논쟁 할 수는 있지만 그 이유를 알았습니다. – itsols

존재 여부에 관계없이 이미지 위에 텍스트를 놓으십시오.

답변

관련 문제