Блок внутри другого блока. Обтекание или вырезание

Question

Нужно разместить блок first_block (зеленый) внутри блока second_block (черный), так чтобы блок second_block обтекал первый блок first_block или вырезал место под него место. Если использовать position:absolute или fixed, то он просто накладывается на этот блок поверх, а мне нужно, чтобы first_block занимал место от блока second_block. В общем нужно, чтобы second_block располагался вокруг блока first_block, и когда у first_block увеличиваешь прозрачность, часть блока second_block не было видно внутри блока first_block.

Мне нужно, чтобы я мог под этими блоками еще что-то расположить и при изменении прозрачности блока first_block это увидеть.

В своем примере я напишу со свойством position:absolute, только чтобы проще было понять вопрос. https://jsfiddle.net/ManuOP/zqc594k6/3/

<div id="main_block" class="main_block">
    <div id="first_block" class="first_block"></div>
    <div id="second_block" class="second_block"></div>
</div>


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

div.main_block {
    display: flex;
    width: 100%;
}

div.first_block {
    position: absolute;
    left: 100px;
    height: 400px;
    width: 500px;
    background: green;
    opacity: 0.5;
}

div.second_block {
    height: 400px;
    width: 1000px;
    background: #000;
}

Answer 1

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

div.main_block {
    display: flex;
    width: 100%;
}

div.first_block {
    position: absolute;
    left: 100px;
  height: 200px;
  width: 300px;
  background: green;
  opacity: 1;
  z-index: 1;
}

div.second_block::before {
  content: "";
  display: block;
  width: 300px;
  margin: 0 auto;
  height: 100%;
  background: white;
  position: relative;
}

div.second_block {
    height: 200px;
  width: 500px;
  background: #000;
  position: relative;
  z-index: -1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="1.block_in_center.css" rel="stylesheet">
</head>
<body>
<div id="main_block" class="main_block">
    <div id="first_block" class="first_block"></div>
    <div id="second_block" class="second_block"></div>
</div>
</body>
</html>

Если конечно я вас правильно понял

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="1.block_in_center.css" rel="stylesheet">
</head>
<body>
<div id="main_block" class="main_block">
    <div id="first_block" class="first_block">
      <div id="second_block" class="second_block">
        еще что-то расположить
      </div>
    </div>
    
</div>
</body>
</html>

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

div.main_block {
    display: flex;
    width: 100%;
    align-items: center;

}

div.first_block {
  height: 200px;
  width: 500px;
  padding: 0 100px;
  background: green;
  
}

div.second_block {
    height: 200px;
  width: 300px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4; /* меняй*/
;}

Если и я првильно понял))??? Клаткцтк по мне

БЛОГ НА HUSL

Блок внутри другого блока. Обтекание или вырезание

Ответы (2 шт):