如何将 div 设置为高于父 div？

Question

我想让这个 "food" div 看起来像图片中的样子。我将图像设为相对位置，并将此 "food" div 设为绝对位置（在我的示例中为 "destination"）。虽然，我不能将它居中并放置得比父 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

Answer 1

包含元素： position: relative 应在包含（父元素）上声明。元素.
嵌套元素： 这将允许绝对定位的嵌套（子）元素相对于其包含元素 .

水平居中对齐：要水平对齐绝对定位的元素，声明 left 和 right 属性值 0 和 shorthand margin 属性 auto 的值。

否定默认全角：记得在 absolutely 定位元素，使其不会占据其包含元素的整个水平宽度（这是预期的使用 left 和 absolutely 定位元素的行为 right 属性值 0).

调整垂直偏移： 声明一个 top 属性具有适合特定的值要求，例如：top: -20px.

改进选择器：最后，更具体选择器，而不是.grid div div，使用可用的class 作为选择器作为 .grid .mini - class 将赋予更多 特异性 并将允许更多 reader- 友好直观的语法结构。

代码片段演示：

/* 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

Answer 2

你在相对 div 中设置绝对 div 是正确的。现在将 left/right 个位置添加到食物 div。设置负数 "top" 会将其置于父级 div 之外，使其呈现您想要的外观。

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

如何将 div 设置为高于父 div？

How do I put a div higher than the parent div?

css

positioning