Question

我有一个包含网站徽标的div，该徽标贴在我的网站的左上角。为了使其具有动态性，我将其位置放在左侧的10％屏幕宽度上。现在，当浏览器的尺寸小于我的内容的宽度时，就会出现问题，它会掩盖网站上的重要按钮或文字。

我似乎无法弄清楚如何解决这个问题，任何投入都会很棒。编辑：添加了其他div，以同时包含徽标横幅和网站上方的登录菜单；

Header.php：

    <div id="navcontainer" class="navcontainer-div">
      <div id="bannier" class="bannier-div">
         <a href="http://webstore.thelifeforge.nl"><img src='/img/banner.png'></a>
      </div> 
      <div id="navigation" class="navigation-div">
         <table width='100%'>menu content</table>
      </div>
    </div>

Style.css：

.navcontainer-div
{
    margin-left:-10px;
    max-width: 100%;
    width:100%;
    /*height: 125px; 
    background-color: #AEB861;*/
    background-image: url('/img/header_bg.png');
    background-repeat: repeat-x;
    display:block;  
    border-radius: 3px;
    top:0;
    position: fixed;
}

.navigation-div
{
    z-index: 2;
    max-width:1000px;
    height:60px;
    background-color: #E4EEB9;
    margin: 0 auto;
    color: #000;
    border-radius: 3px;
}

.bannier-div
{
    z-index: 3;
    left:10%;
    position: fixed;
    width:100%;
    max-width:150px;
}

Answer 1

我认为您应该使用带有父元素的其他类或ID。

示例：

在页面http://webstore.thelifeforge.nl/about.php上，我们有ID导航

在页面http://webstore.thelifeforge.nl上没有ID导航

所以我们可以这样写：

.bannier-div
{
    z-index: 3;
    left:10%;
    position: fixed;
    width:100%;
    max-width:150px;
}

#navigation .bannier-div
{
    z-index: 3;
    left:5%;
    position: fixed;
    width:100%;
    max-width:100px;
}

CSS-动态Div的最小/最大位置

1 个答案: