文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么小图像的边缘相对于大山图像而不是容器div发生变化？

问为什么小图像的边缘相对于大山图像而不是容器div发生变化？
EN

Stack Overflow用户

提问于 2021-04-07 11:52:43

回答 1查看 21关注 0票数 1

云层看起来像是在山体图像的盒子/轮廓内。我认为页边距应该相对于父div容器或viewport来影响。我是CSS新手，不明白为什么会发生这种情况？

为轮廓激活农药的屏幕截图

body {
  background-color: grey;
  margin: 0;
  text-align: center;
}

.top-container {
  background-color: #E4F9F5;
  position: relative;
  padding-top: 100px;
}

.cloud2 {
  position: absolute;
  margin-top: 50px;
  margin-left: 15px;
}

<body>
  <div class="top-container">
    <img class="cloud1" src="images/cloud.png" alt="cloud-img">
    <h1>Welcome</h1>
    <p>This is jungle</p>
    <img class="cloud2" src="images/cloud.png" alt="cloud-img">
    <img class="mountain" src="images/mountain.png" alt="mountain-img">
  </div>
</body>

css-position

回答 1

Stack Overflow用户

发布于 2021-04-21 21:49:18

对于position: absolute (和fixed)，您总是希望提供一个或多个定位约束(即top、left、bottom、right)，以便css知道如何相对于“最近定位的祖先”定位元素。

通过绝对定位一个元素，你告诉css你想要定位这个元素，这样它就不会占用DOM上关于flow layout的空间。css没有提供任何定位约束，只知道它应该定位到的元素。

您可能会假设默认情况下只是将元素放在左上角(即top: 0, left: 0)，但事实并非如此。绝对元素将被抛出，它将被定位为静态元素，但不占用任何块/内联空间。因此，这就是为什么当没有使用定位约束时，元素相对于其兄弟元素的顺序是重要的。顺便说一句，在我的职业生涯中，我从来没有用过这一点，我总是使用位置约束来明确表示！请参阅下面的演示。

所以简而言之，只要使用定位约束，你就很好。

body {
  background-color: grey;
  margin: 0;
  text-align: center;
}

.top-container {
  background-color: #E4F9F5;
  position: relative;
  padding-top: 100px;
}

.cloud2 {
  position: absolute;
  margin-top: 50px;
  margin-left: 15px;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="top-container">
    <img src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
    <h1>Welcome</h1>
    <p>This is jungle</p>
    <img class="cloud2" src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
    <img class="mountain" src="https://www.pngkey.com/png/full/111-1118124_cartoon-clip-art-transprent-png-free-download-mountain.png" alt="mountain-img" width="80%">
  </div>
</body>

</html>

有很多带有position: absolute的gotchas，所以要注意。

搁置一边

CSS需要时间来了解和理解。有一些规则可以指导你，但很多学习过程都是反复试验的，最重要的是，不同的浏览器之间的规则也有一些不同。我已经找到了许多极端边缘情况的解决方案，但后来我已经忘记了，诀窍是记住足够多的东西来再次找到解决方案。随着时间的推移，它将成为第二天性。此外，使用dev tools elements->styles面板快速实验可以帮助您找到解决方案或了解所有属性及其值。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66979343

复制

相似问题

问为什么小图像的边缘相对于大山图像而不是容器div发生变化？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么小图像的边缘相对于大山图像而不是容器div发生变化？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么小图像的边缘相对于大山图像而不是容器div发生变化？
EN