0

Нужно разместить блок 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;
}

2 ответа 2

0

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

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

1
  • Хорошая попытка, но это не то. Мне нужно, чтобы я мог под этими блоками еще что-то расположить и при изменении прозрачности блока first_block это увидеть. Надеюсь, сейчас понятнее стало
    – Manu
    7 дек 2021 в 19:51
0
<!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; /* меняй*/
;}

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.