Как создать Straddling div, который перекрывает прямой одноуровневый div, но не перекрывает содержимое ⇐ Html

[Anonymous]

Я хочу добавить «перемежающийся элемент div» между двумя другими элементами div в макете столбца.
Div 1, Div 2, Div 3.
Диаграмма:


На изображении выше сценарий слева Div1 и Div2 «соприкасаются». Всего два блока div рядом друг с другом в DOM, и каждый из них имеет внутренние отступы.
Во втором сценарии справа я хочу иметь разнесенный div, это не меняет того, что Div1 и Div3 должны быть «соприкасающимися», но я хочу убедиться, что отступы остаются согласованными, чтобы содержимое не перекрывалось разнесенным div.
Попытки в этой скрипте с CSS селекторы, но есть магические числа, которые мне на самом деле не нужны, и это все равно не дало мне нужного решения.
Есть ли какой-нибудь хороший трюк, чтобы сделать это? В идеале без магических чисел и без изменения внешних однородных свойств. Это динамический контент, и потенциально он может находиться между любыми двумя компонентами.

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
}

.container {
max-width: 800px;
margin: 40px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.component {
padding: 60px 40px;
margin: 0;
position: relative;
}

.component h2 {
margin-bottom: 16px;
font-size: 24px;
}

.component p {
line-height: 1.6;
color: #555;
}

/* Normal components */
.component-normal {
background: #ffffff;
border: 2px dashed #e0e0e0;
}

.component-normal:nth-of-type(1) {
background: #fff3e0;
border-color: #ffb74d;
}

.component-normal:nth-of-type(3) {
background: #e8f5e9;
border-color: #81c784;
}

.component-overlap {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 85%;
margin: -40px auto;
padding: 60px 40px;
border-radius: 12px;
position: relative;
z-index: 3;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.component-overlap::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 140px;
top: -140px;
pointer-events: none;
}

.component-overlap::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 140px;
bottom: -140px;
pointer-events: none;
}

.component-overlap p {
color: rgba(255, 255, 255, 0.9);
}

.label {
display: inline-block;
background: rgba(0, 0, 0, 0.1);
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}

.component-overlap .label {
background: rgba(255, 255, 255, 0.2);
}

.info {
margin-bottom: 30px;
padding: 20px;
background: #e3f2fd;
border-left: 4px solid #2196f3;
border-radius: 4px;
}

.info h3 {
margin-bottom: 10px;
color: #1565c0;
}

.info code {
background: rgba(0, 0, 0, 0.05);
padding: 2px 6px;
border-radius: 3px;
font-size: 13px;
}

.info p {
margin-bottom: 8px;
color: #333;
}

Код: Выделить всё

Normal Component (no special class)
First Component
This component has NO special classes. CSS automatically adds extra bottom padding because the next sibling has class "component-overlap".


Overlap Component
Middle Overlap Component
This is the only component that needs the special class! The backgrounds overlap, but content spacing is maintained automatically.


Normal Component (no special class)
Third Component
This component also has NO special classes.  CSS automatically adds extra top padding because the previous sibling has class "component-overlap".

https://jsfiddle.net/Lptofsmj/11

Подробнее здесь: https://stackoverflow.com/questions/798 ... oes-not-ov