个人中心
gpt4 book ai didi

html - 绝对位置会导致图像比原来更大吗？

转载 作者：行者123 更新时间：2023-12-02 18:33:26 25 4
gpt4 key购买 nike

我正在尝试使用 z-index 让 #features div 重叠 .title-image 的一部分。当我将 .title-image 位置设置为绝对位置时，图像会比以前更大。我的问题是，如果 .title-image 包含在名为 col-lg-6 的 div 中，并且已经添加了调整尺寸，那么即使图像包含在 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc2ddc3" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1f130e193c4e5245524e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c0dbc5dbc7" rel="noreferrer noopener nofollow">[email protected]</a>/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>

最佳答案

这是浏览器在绝对或固定定位时的默认行为。尽管它仍在容器 div 内，但 .title-image 上的 width: 60% 不再影响它，因为它无法找到任何父级元素的位置设置为relative 或absolute。

Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relative to the page itself.

The trade-off (and most important thing to remember) about absolutepositioning is that these elements are removed from the flow ofelements on the page. An element with this type of positioning is notaffected by other elements and it doesn’t affect other elements. Thisis a serious thing to consider every time you use absolutepositioning. Its overuse or improper use can limit the flexibility ofyour site.

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#absolute

如果您想要相对于其父级 div 定位 .title-image，则必须设置其(父级 div)相对位置或绝对位置。

示例:https://jsfiddle.net/o9wjrcd7/

希望有帮助!

关于html - 绝对位置会导致图像比原来更大吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69133911/

25 4 0
文章推荐： php - 获取数组的最后一个元素以从中删除逗号
文章推荐： zebra-printers - 使用 ZPL 同时在两个标签上打印
文章推荐： google-cloud-platform - Cloud Scheduler 随机性
文章推荐： react-native - 复活错误 "tried to synchronously call function res from a different thread "
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com