调整浏览器窗口大小时图像浮动答案

【问题标题】：Imaging floating when resizing browser window调整浏览器窗口大小时图像浮动
【发布时间】：2015-09-03 11:46:05
【问题描述】：

一直在尝试让我的 .gif 徽标漂浮在我的标题图像上，即使在调整页面大小时也会粘在那里差不多了，然后我调整了我的窗口大小。我是不是在浪费时间，因为我实际上已经放弃了几个小时没有运气的尝试。

    <head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>B.13 DJ Hire</title>
            <link rel="stylesheet" type="text/css" 
            href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

                    <link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
    </head>

    <body>

     <div id="box">
     <div id="header">
    <a href="index.html" class="banner">
         <img src="images/banner.jpg">
      </a>

      <a href="index.html" class="logo">
         <img src="images/logo.gif">
      </a>



</div>
     <h1>B13. DJ Equipment Hire</h1>
     <nav>
        <ul id="mainnav">
            <li class="home"><a href="index.html">Home</a></li>
            <li class="mixers"><a href="mixers.html">Mixers</a></li>
            <li class="turntables"><a href="turntables.html">Turntables</a></li>
            <li class="mp3"><a href="mp3.html">MP3 Media Players</a></li>
            <li class="headphones"><a href="headphones.html">Headphones</a></li>
            <li class="contact"><a href="contact.html">Contact Us</a></li>
        </ul>
      </nav>
      <h2> Our Equipment Range<h2>
         <br><br>
<p> we are a equipment hire company..</p>



      <br>

     <p id="footer">45 Marsh Grass Ln. &#8226; Marble, MN 55764 &#8226; (218) 555-5253</p>
     </div>
     </body>

这是我的 CSS 代码

body {
    padding: 0;
    margin: 0;
    font-family: tahoma, arial, helvetica, sans-serif;
  }
h1, h2 {
    text-align: center;
    font-family:  georgia, "times new roman", times, serif;
    }
h1 {
    margin: 0;
    font-size: 2em;
    color: white;
    background: #585858;
    line-height: 1.90em;
    width: auto;
    text-align: centre;
    background-position: center;
    text-shadow: 2px 2px 4px #000000;
    border-radius: 0.30em;
    }

h2 {
    font-size: 1.5em;

    }

#box {
    border-style: none;
    width: 70em;
    padding: 0em;
    margin-left: auto; 
    margin-right: auto;
    background: #C2C2C2;
    }

#header{

    }

.banner img{
    position: relative;
    float: left;
    height:206px;
    width:1120px;
    z-index: 1;
    display:block;
    }

.logo img  {
    position: absolute;
    float:right;
    margin-top: 0px;
    margin-left: 0px;
    z-index: 2; 
    height:290px;
    width:712px;
    bottom:335px;
    right:50px;

    }
#footer {
    background: #A6A6A6;
    text-align: right;
    padding: 0.25em;
    margin: 0;
    }

.callout {
    font-weight: bold;  
    }

#mainnav {
    text-align: center;
    background: #A6A6A6;
    padding: 0.75em;
    margin: 0;
    position: relative;
    border-radius: 0.5em;
    }

#mainnav li {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  background: A6A6A6;
  color: #A6A6A6;
  }

#mainnav a:link{
    color:black;
    background-color: transparent;
    text-decoration: none;
    }

#mainnav a:hover{
    color: blue;
    background-color:#C2C2C2;
    text-decoration: underline;
    text-shadow: 8px 12px 12px blue;
    }

#mainnav a:visited {
    color: black;
    }

#mainnav li.home a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.home a:hover {
    color: black;
    background-color:#C2C2C2;
    padding: 10px 20px;
    }

#mainnav li.mixers a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.mixers a:hover {
    color: black;
    background-color:#C2C2C2;
    padding: 10px 20px;
    }

#mainnav li.turntables a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.turntables a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#mainnav li.mp3 a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.mp3 a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#mainnav li.headphones a{
    color:#black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.headphones a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#mainnav li.contact a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.contact a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#slideshow {
    position:absolute;
    text-align: center;
    }

#pics {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    float: right;
    text-align: center;
    }

    #content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
    }


img {
    max-width: 120%;
    display: block;
    background-size: 100%;

}


img {
    max-width: 100%;
    display: block;
}

#slideshow {
wd

【问题讨论】：

你的意思是这样？ jsfiddle.net/3L29qv5q/1

标签： html css css-float margin

【解决方案1】：

你说你想浮动你的图片，你有float 为标志样式，但你也有position:absolute 。你需要使用其中一个来实现你的目标，我的朋友。

您的代码中还缺少一些关闭的 DIV。您可以分享您的问题的网址吗？这可能比看到不完整的代码更容易。

【讨论】：

【解决方案2】：

您的 CSS 样式 (position:absolute) 导致了问题。除了您将其精确定位在页面上的固定位置之外，您的位置属性（如“顶部”“底部”“左侧”和“右侧”）。当您在页面上的某个位置（例如在您的标题中）有一个徽标时，您不希望这样做。要解决此问题，您需要删除“.logo img”的 CSS 下的内容并输入以下内容：

.logo img  {
    height:200px;
    width:200px;
}

这是一个例子：https://jsfiddle.net/Lp7fwm7a/。当您调整窗口大小时，徽标会按照您想要的方式保留在正确的位置。

如果您的标题中有两个 div，您可能还想查看 float 属性。这是一篇很好的文章：https://css-tricks.com/all-about-floats/。

【讨论】：

【解决方案3】：

使用位置：绝对；属性表示图像是根据浏览器窗口定位的（因为页面上没有任何其他绝对定位元素）。

您的顶部和底部值是从浏览器窗口的边缘计算的，而不是从图像的边缘计算的。

您可以将 .logo img 替换为：

position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;

您的徽标比标题图片高很多。我注意到您代码中徽标的顶部被切断了，不确定您是否打算这样做，但如果您编辑边距中的第一个 0，您可以调整顶部边距。 -100px 左右应该把它放回原来的位置。

也只是对其他答案所说的内容的评论，您并没有错过结束 div 标记 - 只是缩进确实不一致，使您的 HTML 和 CSS 真的难以阅读。您在结束 h2 标记中缺少 /，并且在 h1、h2 CSS 中将“中心”拼写为“中心”。

这是所有修复（包括缩进）的链接：http://codepen.io/anon/pen/KpXKVG

【讨论】：

对不起，我是 html 新手，我应该在工作中更加小心
别担心，这只是一般性评论。你在使用文本编辑器吗？语法高亮应该真的很有帮助。此外，大多数编辑器都有热键，可以随时为您编写结束标签。还有……我的例子怎么样？它对你有用吗？
使用记事本++，你的例子很好，凯瑟琳，标志终于坚持了我想要的样子，对我来说java比html代码更容易
啊，是的，它可能有点迷失方向。很高兴它起作用了 - 不要忘记标记已回答的问题！ ;)