html - 绝对位置会导致图像变得比原来更大吗?
问题描述
我试图让div 与使用 z-index#features
的部分重叠。.title-image
当我将.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;900&family=Ubuntu:wght@300;400;700&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>
解决方案
这是浏览器打开absolute
或fixed
定位的默认行为。虽然它仍在容器内div
,但width: 60%
on.title-image
不再影响它,因为它无法找到任何位置设置为relative
or的父元素absolute
。
请记住,这些值将相对于具有相对(或绝对)定位的下一个父元素。如果没有这样的父元素,它将默认一直回到元素本身,这意味着它将相对于页面本身放置。
关于绝对定位的权衡(也是要记住的最重要的事情)是这些元素从页面上的元素流中删除。具有这种定位的元素不受其他元素的影响,也不会影响其他元素。每次使用绝对定位时都要考虑这一点。它的过度使用或不当使用会限制您网站的灵活性。
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#absolute
如果您想要将.title-image
相对位置定位到其父级,则div
必须将其(父级div
)位置设置为relative
or absolute
。
示例:https ://jsfiddle.net/o9wjrcd7/
希望有帮助!
推荐阅读
- oracle-apex - Oracle-Apex 链接显示不同的值
- pandas - 来自产品的 pd.MultiIndex
- tcl - 什么是在 tcl 中生成唤醒警报的好方法
- cloud-foundry - BOSH CLI 预计会在路径中找到地图……但找到了 '[]interface {}'
- qt - 如何使用 CMake 构建在 Qt Creator 中添加新的 C++ 头文件和源文件?
- scala - ScalaTest:在测试之间共享资源
- python - TypeError: 不支持的操作数类型 -: 'module' 和 'LinearSegmentedColormap'
- python - 读取按行存储的 csv 比读取按列存储的 csv 需要更长的时间
- r - 如何根据 R 中的另一个数据框条目替换空白?
- python - 使用 python selenium 从两个不同的下拉菜单中选择元素