个人中心
gpt4 book ai didi

Can the absolute position cause an image to get bigger than it originally was?(绝对位置会导致图像变得比原来更大吗？)

转载 作者：bug小助手 更新时间：2023-10-25 16:37:53 26 4
gpt4 key购买 nike



I am trying to get #features div to overlap part of .title-image using z-index. When I set .title-image position to absolute, the image gets bigger than what it was previously. My question is, if .title-image is contained in a div called col-lg-6with sizing dimensions already added to it, would the sizing be thrown out even though the image was contained in a div? I used another image as the .title-image so that you would see what I am experiencing. What am I doing wrong?

我正在尝试让#Feature div使用z-index覆盖.title-Image的一部分。当我将.ITLITE-IMAGE位置设置为绝对时，图像变得比以前更大。我的问题是，如果.title-Image包含在名为ol-lg-6的div中，并且已经添加了大小尺寸，那么即使该图像包含在div中，大小也会被丢弃吗？我使用了另一个图像作为.title-图像，这样您就可以看到我正在经历的事情。我做错了什么？




#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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>




更多回答
优秀答案推荐

That's the default behavior of the browser on absolute or fixed positioning. Although it's still inside the container div, the width: 60% on .title-image no longer affects it as it's unable to find any parent element with its position set to relative or absolute.

这是浏览器在绝对定位或固定定位时的默认行为。尽管它仍然在容器div中，但.title-Image上的宽度：60%不再影响它，因为它找不到任何位置设置为相对或绝对的父元素。



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 absolute
positioning is that these elements are removed from the flow of
elements on the page. An element with this type of positioning is not
affected by other elements and it doesn’t affect other elements. This
is a serious thing to consider every time you use absolute
positioning. Its overuse or improper use can limit the flexibility of
your site.


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



If what you want is to position the .title-image relative to it's parent div you must set its (the parent div) position to relative or absolute.

如果您想要的是相对于其父div定位.title-Image，则必须将其(父div)位置设置为相对或绝对。


Example: https://jsfiddle.net/o9wjrcd7/

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


Hope that helps!

希望这能有所帮助！



just add

只需添加


Position:relative;

职位：相对；


to the parent of title-img.
you are following the course full-stack course of angilia.

TITLE-IMG的父级。你正在沿着安吉莉亚的路线全程前进。


I was also having the same doubt

我也有同样的怀疑



I had the same problem, and I wasted like a day trying to solve that issue on my own.
This problem is caused because of different version of bootstrap.

我也有同样的问题，我浪费了一天的时间试图独自解决这个问题。此问题是由不同版本的引导程序引起的。


position: absolute; changes the size of the image depending on the size of its nearest ancestor, and its parent should have a position other than static.

位置：绝对；根据其最近祖先的大小更改图像的大小，并且其父图像的位置应该不是静态的。


You need to set the position of its parent to relative in order to solve this problem.

要解决此问题，需要将其父对象的位置设置为相对。




<div class="title-image-div 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>

<style>
.title-image-div {
position: relative;
}
</style>





An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

具有位置的元素：绝对的;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。


However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
I think you could try to position it relative and also reduce the rotation.

但是，如果绝对定位的元素没有定位的上级元素，它将使用文档正文，并随页面滚动一起移动。我想你可以试着把它放在相对的位置，同时减少旋转。





<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>




try adding inline style to the parent of .title-image (col-lg-6) so it looks like this:

尝试将内联样式添加到.ITLE-IMAGE(ol-lg-6)的父级，使其如下所示：


<div class="col-lg-6" style="position: relative;">
   <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>

The reason for this is, angela used Bootsrap 4 in her course which give col-lg-6 default position's value of relative. meanwhile, in Bootstrap 5 col-lg-6 has default position's value of static

这样做的原因是，Angela在她的课程中使用了Bootsrap 4，这给出了ol-LG-6的默认位置值Relative。同时，在Bootstrap 5中，ol-lg-6的默认位置值为Static


CMIIW

CMIIW



/* Title Images */
.title-image-con {
   position: relative;
}

.title-image {
    width: 60%;
    transform: rotate(25deg);
    position: absolute;

}

/* Features */
#features {
    padding: 7% 15%;
    background-color: white;
    position: relative;
    z-index: 1;
}




<div class="title-image-con col-lg-6">
    <img class="title-image rotate" src="images/iphone6.png" alt="iphone- 
     mockup">
</div>


Adding another class name to the element and make the position relative on css works for me.

向元素添加另一个类名，并使位置相对于css，对我来说是可行的。


css snippet

CSS代码片断


更多回答

Thanks for your help!

谢谢你的帮助！

Please give more information, try answering the questions made on the topic: Can the absolute position cause an image to get bigger than it originally was?, would the sizing be thrown out even though the image was contained in a div?, What am I doing wrong?, don't simply write a code, give some explanations and answers :)

请给出更多的信息，尝试回答围绕这个主题提出的问题：绝对位置会导致图像变得比原来更大吗？即使图像包含在div中，大小会被抛出吗？我做错了什么？，不要简单地写代码，给出一些解释和答案：)

26 4 0
文章推荐： Create a single object from chained comparison in Python(在Python中通过链接比较创建单个对象)
文章推荐： Does the linesearch in scipy.optimize.minimize() with BFGS calculate gradients of the objective function for different values of the step size?(使用bfgs的scipy.Optimize.Minimum()中的行搜索是否为不同步长的值计算目标函数的梯度？)
文章推荐： How to get China Stock Market Index (SSE) in Google Sheets using GOOGLEFINANCE?(如何使用GOOGLEFINANCE在Google Sheet中获取中国股票市场指数(SSE)？)
文章推荐： Loading Translation Files from a Server or CMS in next-intl - Seeking Guidance(在下一步国际指南中从服务器或CMS加载翻译文件)
bug小助手
个人简介

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

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