如何将 div 放在高于父 div 的位置？答案

【问题标题】：How do I put a div higher than the parent div?如何将 div 放在高于父 div 的位置？
【发布时间】：2019-09-07 20:47:34
【问题描述】：

我想让这个“食物”div 看起来和图片中的一样。我为这个“食物”div（在我的示例中为“目的地”）设置了图像的相对位置和绝对位置。不过，我无法将其居中并放置在高于父 div 的位置。

[1]:https://i.stack.imgur.com/ab1nj.png

.grid div img{
    width: 100%;
    height:50%;
    position: relative;
}
.grid div div{
    background-color: white;
    z-index: 100;
    
   
    border-radius: 0;
    
    position: absolute;
  
}

  <div class="grid">
            <div> 
                <div class="mini">DESTINATIONS</div>
                <img src="Middle-East-Egypt-Pyramids1.png" alt="альтернативный текст">
                <h2>Top destinations to visit</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur lorem eu est suscipit aliquam. In lectus magna, sagittis in est sed, tempus fringilla neque.</p>
                <h4>READ MORE</h1>
            </div>
            <div>item-2</div>
            <div>item-3</div>
            <div>item-4</div>
            <div>item-5</div>
            <div>item-6</div>
            <div>item-7</div>
            <div>item-8</div>
            <div>item-9</div>
            <div>item-10</div>
        </div

【问题讨论】：

请阅读stackoverflow.com/help/mcve，然后回来编辑您的问题。

标签： css positioning

【解决方案1】：

包含元素： position: relative 应在包含（父）上声明。元素。
嵌套元素：这将允许绝对定位嵌套（子）元素 相对于其包含元素进行定位。
水平居中对齐：要水平对齐绝对定位的元素，声明 left 和 right 的属性值 0 和速记 marginauto 的属性值。
否定默认全角：记得在绝对定位元素，这样它就不会占据其包含元素的整个水平宽度（这是预期的使用left 和绝对定位元素的行为 right0 的属性值）。
调整垂直偏移： 声明一个top 属性，其值适合特定的要求，例如：top: -20px。
改进选择器：最后，更具体使用选择器，而不是 .grid div div，使用可用类作为选择器 .grid .mini - 类将赋予更多特异性，并允许更多易于阅读且直观的语法结构。

代码片段演示：

/* for the sake of demonstration */

* {
  box-sizing: border-box;
}

.grid {
  max-width: 500px;
  text-align: center;
  border: 1px solid;
  position: relative; /* required to position absolutely nested element relative to contianing element and not windowe */
  margin-top: 50px;
}

.grid div img {
  max-width: 100%;
}

.grid .mini { /* be more specific with your selectors */
  background-color: white;
  z-index: 100;
  border-radius: 0;
  position: absolute;
  left: 0;  /* required to align horizontally center */
  right: 0;  /* required to align horizontally center */
  top: -20px; /* adjust accordingly as per requirements */
  margin: auto;  /* required to align horizontally center */
  max-width: 200px;
  padding: 10px;
  border: 1px solid;
}

<div class="grid">
  <div>
    <div class="mini">DESTINATIONS</div>
    <img src="https://placehold.it/500x300" alt="альтернативный текст">
    <h2>Top destinations to visit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur lorem eu est suscipit aliquam. In lectus magna, sagittis in est sed, tempus fringilla neque.</p>
    <h4>READ MORE</h1>
  </div>
  <div>item-2</div>
  <div>item-3</div>
  <div>item-4</div>
  <div>item-5</div>
  <div>item-6</div>
  <div>item-7</div>
  <div>item-8</div>
  <div>item-9</div>
  <div>item-10</div>
  </div

【讨论】：

【解决方案2】：

在相对 div 中设置绝对 div 是正确的。现在将左/右位置添加到食物 div。设置一个负数“top”会将其带到父 div 之外，使其具有您想要的外观。

position: absolute;
left: 50%;
top: -10px;

【讨论】：