#css #position
Вопрос:
Я пытаюсь установить тег img на свой внутренний текст и сделать его в правом нижнем углу. (не исправлено! Я не хочу приклеивать это изображение)
Однако, когда я использую «положение: относительно» для родительского div(это также элемент flex) и «положение: абсолютное» для img, я обнаружил проблему.
Он должен располагаться по родительскому разделу, но его положение определяется «телом».
Я не знаю, почему это произошло. Это все еще беспокоит меня и расстраивает.
body { background-color: #000; color: #fff; } .navbar { background-color: #eff0f3; width: 100%; height: 72px; } .section { width: 100%; } .section-hero { height: calc(100vh - 72px); background: #fff; } .section-hero .background { width: 100%; height: 100%; } .section-hero .logo { position: absolute; bottom: 120px; left: calc(50% - 500px /2); width: 500px; filter: drop-shadow(5px 5px 15px rgba(170,180,200,0.25)); z-index: 8; } .section-hero .logo img { width: 100%; height: auto; } .section-about { margin-top: 72px; height: 100vh; display: flex; justify-content: center; align-items: center; } .section:not(.fill) .inner { margin: 0 120px; padding: 24px 0; } .section-about .inner { background-color: rgba(0,0,0,0.85); width: 100%; } .section-about .pic { position: relative; } .section-about .pic img { position: absolute; right: 12px; bottom: 0px; } lt;header class="section fill section-hero"gt; lt;div class="background"gt;lt;/divgt; lt;div class="inner"gt;lt;/divgt; lt;div class="logo"gt;lt;img src="img/logo.png"gt;lt;/divgt; lt;/headergt; lt;nav class="navbar"gt;lt;/navgt; lt;section class="section section-about"gt; lt;a name="about"gt;lt;/agt; lt;div class="inner"gt;lt;/divgt; lt;div class="pic"gt; lt;img src="(picture.png)"gt; lt;/divgt; lt;/sectiongt; Ответ №1:
установите absolute для div-обертки значение не img и установите relative для раздела
body { background-color: #000; color: #fff; } .navbar { background-color: #eff0f3; width: 100%; height: 72px; } .section { width: 100%; } .section-hero { height: calc(100vh - 72px); background: #fff; } .section-hero .background { width: 100%; height: 100%; } .section-hero .logo { position: absolute; bottom: 120px; left: calc(50% - 500px /2); width: 500px; filter: drop-shadow(5px 5px 15px rgba(170,180,200,0.25)); z-index: 8; } .section-hero .logo img { width: 100%; height: auto; } .section-about { margin-top: 72px; height: 100vh; display: flex; justify-content: center; align-items: center; position:relative; } .section:not(.fill) .inner { margin: 0 120px; padding: 24px 0; } .section-about .inner { background-color: rgba(0,0,0,0.85); width: 100%; } .section-about .pic { position: absolute; right: 12px; bottom: 0px; } lt;header class="section fill section-hero"gt; lt;div class="background"gt;lt;/divgt; lt;div class="inner"gt;lt;/divgt; lt;div class="logo"gt;lt;img src="img/logo.png"gt;lt;/divgt; lt;/headergt; lt;nav class="navbar"gt;lt;/navgt; lt;section class="section section-about"gt; lt;a name="about"gt;lt;/agt; lt;div class="inner"gt;lt;/divgt; lt;div class="pic"gt; lt;img src="(picture.png)"gt; lt;/divgt; lt;/sectiongt; Комментарии:
1. Я также хочу сделать внутренний горизонтальный центр и вертикальный центр, так как я могу это сделать?
2. к какому элементу вы хотите применить этот стиль? в img?