Question

我想把一个带有标题的图像放在图像后面。当我对图像使用绝对定位时，div位于图像下方。我如何解决它，以便div在图像之后：http://jsfiddle.net/qhcb0616/

.slide-square {
	width: 148px;
	height: 348px;
    border:solid 1px black;
	background: red;
}

.slide-square img {
	position: absolute;
}

.slide-square h1 {
	position: relative;	
    font-size:11px;
    background :blue;
    text-align:right;
    float:right;
    color:white;
    padding:5px;
    margin-top:5px;
    margin-right:5px;
}

.slide-square div {
	display: inline-block;
	font-size: 50px;
}

<div class="slide-square">
  <img src="http://www.flowers-online.com.au/flower-pictures/spring-surprise-flower-bouquet-b10l.jpg" alt="" width="148" height="148">
  <h1>Scientific</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit debitis error magnam sunt numquam ab quasi omnis eaque dolore, perferendis quisquam, minus qui repudiandae possimus esse tempore ipsum adipisci soluta!</div>
</div>

Answer 1

您需要的是absolute h1元素。试试这个：

让父亲相对：

.slide-square {
  position: relative;
}

然后将h1放在父

上

.slide-square h1 {
  position: absolute;
  top: 5px;
  right: 5px;
}

_{同时删除img的绝对值}

检查下面的代码段

＆＃13;

.slide-square {
  width: 148px;
  height: 348px;
  border: solid 1px black;
  background: red;
  position: relative;
}
.slide-square h1 {
  position: absolute;
  font-size: 11px;
  background: blue;
  text-align: right;
  color: white;
  margin:0;
  padding: 5px;
  top: 5px;
  right: 5px;
}
.slide-square div {
  display: inline-block;
  font-size: 50px;
}

＆＃13;

<div class="slide-square">
  <img src="http://www.flowers-online.com.au/flower-pictures/spring-surprise-flower-bouquet-b10l.jpg" alt="" width="148" height="148">
  <h1>Scientific</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit debitis error magnam sunt numquam ab quasi omnis eaque dolore, perferendis quisquam, minus qui repudiandae possimus esse tempore ipsum adipisci soluta!</div>
</div>

＆＃13;

保持div绝对定位下的图像

1 个答案:

检查下面的代码段