Question

我想在带有div的图像上创建文本框/框，我已经尝试了这个，但为什么它不能。

我的代码在这里：

HTML / CSS：

＆＃13;

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

＆＃13;

<!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="bg.jpg" />
		<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>`

＆＃13;

CSS代码只是浮动div，我试过显示：内联块仍然没有工作。

Answer 1

您使用绝对定位但不指导内容的放置位置。尝试使用顶部，左侧，右侧，底部来调整内容位置。

top:20%;
right:100px;

＆＃13;

.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;
}

＆＃13;

<!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>`

＆＃13;

Answer 2

.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>

我在图像上尝试了一个漂浮的div但是没有工作

2 个答案: