#html #css #bootstrap-4
Вопрос:
Я пытаюсь заставить #features div частично перекрывать .title-image использование z-индекса. Когда я устанавливаю .title-image положение в абсолютное, изображение становится больше, чем было раньше. Мой вопрос в том, что если .title-image содержится в div, вызываемом col-lg-6 с уже добавленными к нему размерами, будет ли размер удален, даже если изображение содержалось в div? Я использовал другое изображение, .title-image чтобы вы увидели, что я испытываю. Что я делаю не так?
#title {
background-color: #ff4c68;
color: #fff;
}
body {
font-family: 'Montserrat';
font-weight: normal;
}
h1 {
font-family: 'Montserrat';
font-size: 3.5rem;
font-weight: 900;
line-height: 1.5;
}
h2 {
font-family: 'Montserrat';
font-weight: bold;
font-size: 3rem;
line-height: 1.5;
}
h3 {
font-family: 'Montserrat';
font-weight: bold;
}
p {
color: #8f8f8f;
}
.container-fluid {
padding: 3% 15%;
}
/* Navigation Bar */
.navbar {
padding: 0 0 4.5rem;
}
.navbar-brand {
font-family: 'Ubuntu';
font-size: 2.5rem;
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: 'Montserrat';
font-weight: 400;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title Image */
.title-image {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.features-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* Testimonial Section */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item {
padding: 7% 15%;
}
/* Pricing */
#pricing {
padding: 100px;
}
.sign-up {
margin-top: 35px;
}
.pricing-column {
padding: 3% 2%;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900amp;family=Ubuntu:wght@300;400;700amp;display=swap" rel="stylesheet">
<!-- CSS Stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<!-- Bootstrap script -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">TinDog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby</h1>
<button type="button" class="btn btn-lg btn-dark download-button"><i class="fab fa-google-play"></i> Download</button>
<button type="button" class="btn btn-lg btn-outline-light download-button"><i class="fab fa-apple"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="https://img.favpng.com/18/8/0/iphone-6s-plus-iphone-6-plus-apple-iphone-6s-png-favpng-2qagf951EWF4xaNNGb9WBPdNZ.jpg" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="features-box col-lg-4">
<i class="icon fas fa-check-circle fa-4x"></i>
<h3>Easy to use</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="features-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="features-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i>
<h3>Guaranteed to work</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false" data-bs-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row text-center">
<div class="pricing-column col-lg-4 col-md-6">
<div class="card h-100">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button" class="sign-up w-100 btn btn-lg btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card h-100">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="sign-up w-100 btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4">
<div class="card h-100">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="w-100 btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html> Ответ №1:
Это поведение браузера по умолчанию absolute при включении или fixed размещении. Хотя он все еще находится внутри контейнера div , кнопка width: 60% вкл .title-image больше не влияет на него, так как он не может найти какой-либо родительский элемент с его позицией, установленной в relative или absolute .
Помните, что эти значения будут относиться к следующему родительскому элементу с относительным (или абсолютным) расположением. Если такого родителя нет, он будет по умолчанию полностью восстановлен до самого элемента, что означает, что он будет размещен относительно самой страницы.
Компромисс (и самое главное, что нужно помнить) в отношении абсолютного позиционирования заключается в том, что эти элементы удаляются из потока элементов на странице. Элемент с таким типом позиционирования не зависит от других элементов и не влияет на другие элементы. Это серьезная вещь, которую следует учитывать каждый раз, когда вы используете абсолютное позиционирование. Его чрезмерное или неправильное использование может ограничить гибкость вашего сайта.
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#absolute
Если вы хотите расположить объект .title-image относительно его родителя div , вы должны установить его (родительское div ) положение в relative или absolute .
Пример: https://jsfiddle.net/o9wjrcd7/
Надеюсь, это поможет!
Комментарии:
1. Спасибо за вашу помощь!
Ответ №2:
Элемент с position: absolute; позиционируется относительно ближайшего расположенного предка (вместо позиционирования относительно окна просмотра, как фиксированный).
Однако; если абсолютный позиционированный элемент не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы. Я думаю, вы могли бы попытаться расположить его относительно, а также уменьшить вращение.