내가 이미지 위에 떠있는 사업부를 시도했지만 내가 DIV과 이미지 위에 텍스트 상자/상자를 만들고 싶어

My Problem 내가 이미지 위에 떠있는 사업부를 시도했지만 내가 DIV과 이미지 위에 텍스트 상자/상자를 만들고 싶어

작동하지 않습니다, 난 이미 시도했지만.

내 코드가 여기에 표시됩니다 :

HTML/CSS :

.main{ 
 
\t position: relative; 
 
\t margin: 8; 
 
} 
 
.main img{ 
 
\t position: relative; 
 
\t height: 510px; 
 
\t width: 100%; 
 
} 
 
.main-content{ 
 
\t position: absolute; 
 
\t background: white; 
 
\t height: 40px; 
 
\t width: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>PokeMart</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="header"> 
 
\t \t <img src="valor.png"> 
 
\t \t <h3>PokeMart</h3> 
 
\t \t <h4><a href="#">Login</a></h4> 
 
\t \t <h4><a href="#">Register</a></h4> 
 
\t </div> 
 
\t <div class="main"> 
 
\t \t <img src="bg.jpg" /> 
 
\t \t <div class="main-content">Text</div> 
 
\t </div> 
 
\t <div class="footer"> 
 
\t \t <h5>Pokemart established 2017, powered by Pokemon Company</h5> 
 
\t \t <h5>Copyright © 2017 LL. All Right Reserved.</h5> 
 
\t \t <div class="contact"> 
 
\t \t \t <img src="facebook.png" width="25" height="25"> 
 
\t \t \t <img src="google.png" width="25" height="25"> 
 
\t \t \t <img src="twitter.png" width="25" height="25"> 
 
\t \t \t <img src="github.png" width="25" height="25"> 
 
\t \t \t <img src="instagram.png" width="25" height="25"> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>`

CSS 코드를 바로 떠 DIV, I 디스플레이를 시도 : 인라인 블록은 여전히 작동하지 않습니다 .

출처

2017-12-30 Reinaldi

플로트와 시도는 :/우 – ram

적용 위치 왼쪽 : 절대; 상단 및 우측으로 조정하십시오. 예 : 위치 : 절대, 상단 : 100px, 우측 : 100px, –

이미지가 페이지의 기능을 제공합니까? 그렇지 않은 경우 CSS 배경 이미지로 변환해야합니다. –

절대 위치 지정을 사용하고 있지만 콘텐츠를 배치 할 위치는 지정하지 않았습니다. 위쪽, 왼쪽, 오른쪽, 아래쪽을 사용하여 시도하십시오 ~ 콘텐츠 위치를 조정.

top:20%; 
right:100px;

.main { 
 
    position: relative; 
 
    margin: 8; 
 
} 
 

 
.main img { 
 
    position: relative; 
 
    height: 510px; 
 
    width: 100%; 
 
} 
 

 
.main-content { 
 
    position: absolute; 
 
    top: 20%; 
 
    right: 100px; 
 
    background: white; 
 
    height: 40px; 
 
    width: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>PokeMart</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <img src="valor.png"> 
 
    <h3>PokeMart</h3> 
 
    <h4><a href="#">Login</a></h4> 
 
    <h4><a href="#">Register</a></h4> 
 
    </div> 
 
    <div class="main"> 
 
    <img src="http://via.placeholder.com/9000x500" /> 
 
    <div class="main-content">Text</div> 
 
    </div> 
 
    <div class="footer"> 
 
    <h5>Pokemart established 2017, powered by Pokemon Company</h5> 
 
    <h5>Copyright © 2017 LL. All Right Reserved.</h5> 
 
    <div class="contact"> 
 
     <img src="facebook.png" width="25" height="25"> 
 
     <img src="google.png" width="25" height="25"> 
 
     <img src="twitter.png" width="25" height="25"> 
 
     <img src="github.png" width="25" height="25"> 
 
     <img src="instagram.png" width="25" height="25"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>`

출처

2017-12-30 09:22:59

.wrap { 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    max-width: 450px; 
 
} 
 
.wrap img { 
 
    border: 1px solid #000; 
 
    display: block; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 
.wrap .overlay { 
 
    border: 1px solid #000; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
} 
 
.wrap .overlay .box { 
 
    margin: auto; 
 
    background-color: #FFF; 
 
    border: 1px solid #000; 
 
    padding: 40px; 
 
}

<div class="wrap"> 
 
    <img src="http://www.telegraph.co.uk/content/dam/gaming/2017/10/10/Pokemon-Halloween_trans_NvBQzQNjv4BqZPnXlBHEdt8AtjizIYNgmRSlK0RKxqt6w8JJghUtSuI.jpg?imwidth=450"> 
 
    <div class="overlay"> 
 
    <div class="box">box</div> 
 
    </div> 
 
</div>

출처

2017-12-30 11:34:34

내가 이미지 위에 떠있는 사업부를 시도했지만 내가 DIV과 이미지 위에 텍스트 상자/상자를 만들고 싶어

답변

관련 문제