Я хочу создать страницу Bootstrap с разделенным экраном 4 и поместить изображение в центр, перекрывающее два столбца. Я создал два одинаковых столбца, но не знаю, как разместить изображение, чтобы перекрыть их.
Я пробовал position:absolute и float:left, но это не помогает. Спасибо за вашу помощь!
position:absolute
float:left
Ожидаемое: Фото
html, body { height: 100%; margin: 0; } body { overflow-x: hidden; } col { height: 100vh; } img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
<!DOCTYPE html> <html lang="en"> <head> <title>Website</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </head> <body> <img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto"> <div class="row h-100"> <div class="col" style="background-color:blue"> Left </div> <div class="col" style="background-color:red"> Right </div> </div> </body> </html>
просто добавьте z-index в ваш класс img
z-index
Свойство z-index определяет порядок стека элемента. Элемент с более высоким порядком стека всегда находится перед элементом с более низким порядком стека.
Примечание: z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная)
html, body { height: 100%; margin: 0; } body { overflow: hidden; } col { height: 100vh; } img { position: absolute; top: 15%; bottom: 0; left: 0; right: 0; z-index: 1001; height: 100%; }
это решает вашу проблему:
html, body { height: 100%; margin: 0; } body { overflow-x: hidden; } col { height: 100vh; } img { position: absolute; bottom: 0; /* i deleted top:0; */ left: 50%; /* this and below code for excellent centered */ transform:translateX(-50%); z-index:2; }
<!DOCTYPE html> <html lang="en"> <head> <title>Website</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </head> <body> <img src="https://picsum.photos/400/500"> <div class="row h-100"> <div class="col" style="background-color:blue"> Left </div> <div class="col" style="background-color:red"> Right </div> </div> </body> </html>
также я удалил атрибут class и style из тега img. потому что они ненужны.
class
style
img
Добавить z-index: 1; в ваш img css
z-index: 1;
img { z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }