Question

我对网页设计还不熟悉，当窗口大小发生变化时，我一直试图不改变页面中的所有元素。我能够成功完成页面上的所有内容，但一个图像除外。我希望这个图像保持在标题内，但是当我相对于标题而不是固定的位置时，它导致标题大小加倍（即使它的位置理论上不应该 - 从我可以告诉的当然）。当我使用position：fixed之前，它看起来很完美（除非它在窗口更改时没有随着标题移动）。我已经使用Inspect Element来尝试确定问题所在，但我无法确定它。我错过了重要的事吗？如果需要更多信息，请告诉我！祝你有美好的一天！

HTML：

<header>
<img src="Images/example.png" alt="Filler">
<h1>Filler Text</h1>
<h6>Filler Text</h6>
<nav role="Navigation">
<div class="container">
  <div><a href="home.html" class="btn">Home</a></div>
  <div><a href="art&vid.html" class="btn">Articles/Videos</a></div>
  <div><a href="mag&pod.html" class="btn">Magazines/Podcasts</a></div>
  <div><a href="cal.html" class="btn">Calendar</a></div>
  <div><a href="about.html" class="btn">About Us</a></div>
</div>
</header>

CSS：

header {background-color: #ff0000;
        font-family: Georgia;
        color: #FFFFFF;
        margin-top: 10px;
        border-top: 3px solid #000000;
        border-bottom: 3px solid #000000;
        border-left: 3px solid #000000;
        border-right: 3px solid #000000;
        width: 100%;
        z-index: 10;
        padding:0;
        position: relative;}

header img {position: relative;
            top: 100px;
            left: 50px;
            max-width:100%;
            max-height:100%;
            border-radius: 10px;}

header h1 {text-align: -webkit-center;}
header h6 {text-align: -webkit-center;}

Answer 1

将header img职位更改为absolute是否会解决您的问题？

在 A List Apart CSS Positioning 101

上有关于CSS的position属性的非常好的文章

Answer 2

看起来你对几件事感到困惑。

定位 - 当元素具有属性值position: fixed;时，浏览器会渲染所有内容，就好像固定元素不存在一样，然后相对于视口呈现固定元素。

当一个元素具有属性值position: relative;时，浏览器会为该元素通常放置的位置留出空间（留下一个空格并将其他元素放置在那里），然后移动相对于其正常位置的相对元素。

嵌套元素 - 如果您不希望元素在其父容器外部中断，则通常不需要覆盖或声明定位。

显示属性 - 每个HTML元素都有一个默认显示值，您应该看到的最常见的三个是block，inline和inline-block

默认情况下，图像包含延伸父容器宽度的属性值display: inline-block;，除非父容器为其腾出空间，除非父容器的大小在CSS中声明，这是为什么你看到标题更改大小。

示例

header { margin: 0 auto; background-color: #f00; color: #FFF; border: 3px solid #000; max-width: 500px; padding: 10px; } header img { width: 100%; border-radius: 10px; } h1, h6 { text-align: center; } .nav { list-style: none; padding: 0; }

<header> <img src="http://lorempixel.com/1000/400/" alt="Filler Photo"> <h1>Filler Text</h1> <h6>Filler Text</h6> <ul class="nav"> <li><a href="/home.html">Home</a></li> <li><a href="/art&vid.html">Articles/Videos</a></li> <li><a href="/mag&pod.html">Magazines/Podcasts</a></li> <li><a href="/cal.html">Calendar</a></li> <li><a href="/about.html" class="btn">About Us</a></li> </ul> </header>

标题内部的图像导致标题扩展

2 个答案: