Question

我是编码之旅的新手，如果这个问题有点基本，我深表歉意，但我不知道我要去哪里。

我目前正在前端向导上解决此挑战：https://www.frontendmentor.io/challenges/huddle-landing-page-945317

当我使用position：absolute来定位元素时，它们似乎是相对于root / body元素来定位自己，而不是相对于其父元素来定位。

body {
  font-family: 'Open Sans';
  width: 1440px;
  margin: 0 auto;
}

.section-2 {
  height: 370px;
  margin: 0 auto;
  width: 68%;
  box-shadow: 0px 0px 18px -3px rgba(0, 0, 0, 0.11);
}

.section-2-text {
  padding: 100px 0 0 80px;
  width: 440px;
}

.grow-img {
  width: 26%;
  position: absolute;
  left: 67%;
  top: 47.5%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Poppins" rel="stylesheet">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="css/styles.css">
  <title>Frontend Mentor | Huddle landing page with alternating feature blocks</title>
</head>

<body>

  <div class="section-1">
    <div class="nav">
      <img class="logo" src="images/logo.svg" alt="">
      <a class="butn" href="mailto:name@email.com">Try it free</a>
    </div>
    <img class="mockups-img" src="images/illustration-mockups.svg" alt="">
    <h1>Build The Community<br>Your Fans Will Love</h1>
    <p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as you engage in genuine discussion.</p>
    <p>Get Started For Free</p>
  </div>

  <div class="section-2">
    <img class="grow-img" src="images/illustration-grow-together.svg" alt="">
    <div class="section-2-text">
      <h2>Grow Together</h2>
      <p class="blurb-text"> Generate meaningful discussions with your audience and build a strong, loyal community. Think of the insightful conversations you miss out on with a feedback form. </p>
    </div>
  </div>

</body>

</html>

我包含在CSS中的示例涉及'grow-img'类中的图像。

应该相对于它定位吗？相反，当我使用top和left属性定位图像时，开始位置是从页面的绝对顶部和绝对左侧开始。

Answer 1

使用绝对定位时，具有绝对值的元素需要在相对位置定位父对象。否则，它将默认为body标签。

'position：absolute'响应整个页面而不是父元素

1 个答案: