Question

感谢您帮助我。

我花了好几个小时试图解决这个问题，而不是去任何地方:(

我试图将图像（p）固定在标题左侧的标题中。主要问题是，我无法将图像保留在标题内。

非常感谢任何帮助。

CSS

.wallpaperlogo{
background-image: url('../images/p');
position: absolue;
width: 100px;
height:100px;
padding: 5px;
margin: 0;
}

.wallpaper img{
height: 100%;
width: 100%;

}

HTML

<body>
<div class="background">
    <div class="header">
         <div class="wallpaperlogo">
    <div class="menu">
        <ul class="nav">
            <li id="nav-products"><a href="#">Products</a></li>
            <li id="nav-contact"><a href="#">Contact</a></li>
            <li id="nav-about"><a href="#">About</a></li>
        </ul>   
    </div>
</div>

修改

我认为它现在确实保留在标题内，但我似乎无法在不消失的情况下调整它。只是想知道我应该如何调整它以使其位于标题的左上角。

Here's what's happening

CSS

.header {
border-bottom: 1px solid #CCC;
width: 100%;
height: 80px;
position: relative;
overflow: hidden;
}

.wallpaperlogo {
background-image: url('../images/p');
position: absolute;
height: 100%;
width: 100%;

}

Answer 1

绝对定位将物品绝对相对定位到最近的定位祖先。因此，您需要设置另一个元素位置：relative以使其起作用。

我很难准确描绘你想要实现的目标，但我相信如果你将你的标题设置为位置：相对，你在.wallpaperlogo上设置的绝对定位将起作用。

PS - HTML5现在允许你使用标签，而不是给你的div一个id / class这个名字:)

Here's a link对W3School对定位的解释。

Answer 2

* {
  margin: 0;
  padding: 0;
}

.wallpaperlogo{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/0a/Ulan_Spiral_2000x2000.png');
width: 100px;
height:100px;
padding: 5px;
margin: 0px;
/*position:absolute;*/
/*position:fixed; /* to fix the header at the left top then */
position:fixed;
}


.wallpaperlogo img{
height: 100%;
width: 100%;

}

<body>
<div class="background">
    <div class="header">
         <div class="wallpaperlogo">
    <div class="menu">
        <ul class="nav">
            <li id="nav-products"><a href="#">Products</a></li>
            <li id="nav-contact"><a href="#">Contact</a></li>
            <li id="nav-about"><a href="#">About</a></li>
        </ul>   
    </div>
   
</div>
<br><br><br>
<br><br><br>

<p>
bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 


</p>

注意：

您可以使用position:fixed;来修复标题左侧顶部的标题

如果您要滚动，请使用position:absolute;

* { margin: 0; padding: 0; }使用此功能您可以从浏览器默认设置中删除默认的填充和边距。

将图像保留在标题内

2 个答案: