Question

我正在尝试在img顶部设置白色div。

我尝试过绝对和相对位置，但没有成功。我被卡住了。

该框显示在img容器下方。

我在做什么错？：）

.img_container {
  margin-left: 40px;
  margin-right: 40px;
  background-size: cover;
  background-position: center center;
  position: relative;
  text-align: center;
		
}


.img_container .the_img img {
   width: 100%;
   height: 420px;
	
}

.img_container .the_img .container_white{
    width: 900px;
    height: 50px;  
    margin: 0 auto;
    background: white;
    position:absolute;
    
}

	<div class="img_container">	
				<div class="the_img">	
					<?php echo get_the_post_thumbnail( get_the_ID(), 'large'); ?>
			    <div class="container_white">¨
				</div>
				</div>
				</div>
				 <div class="fixfloat"></div>

Answer 1

get_the_post_thumbnail唯一要做的就是在您的代码中插入一个图像元素。例如，它将生成如下内容：

<img width="" height="" src="" class="" alt="" large="" srcset="" sizes="">

当然充满了您的自定义值。为了更好的演示，我将PHP函数调用替换为返回的img标记。

如果要相对于其父级放置div：


您的父母应为position: relative

您的孩子应该postion: absolute

在您的情况下，the_img元素是父元素。 img和container_white这两个子级都必须是绝对的，才能从常规文档流中删除它们。参见代码片段。

.img_container {
  margin-left: 40px;
  margin-right: 40px;
  background-size: cover;
  background-position: center center;
  position: relative;
  /**text-align: center;**/
}


.img_container .the_img img {
   width: 100%;
   height: 420px;
   position: absolute;
}

.img_container .the_img .container_white{
    width: 900px;
    height: 50px;  
    margin: 0 auto;
    background: white;
    position:absolute;
}

.the_img{
  position: relative;
}

<div class="img_container">	
  <div class="the_img">	
     <img src="https://images.pexels.com/photos/386148/pexels-photo-386148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="beach">
     <div class="container_white"></div>
  </div>
</div>
<div class="fixfloat"></div>

所以您唯一要做的就是

将the_img设为relative
将img设为absolute

注意：为了更好地显示，我从text-align: center中删除了img_container。

在img容器顶部显示div

1 个答案: