Question

我正在尝试将我的徽标放在我在css中创建的菜单栏上方，但是我尝试的徽标始终位于菜单栏下方，我正在尝试在菜单栏中创建一个带有徽标的页面宽度的菜单栏菜单栏。

我的CSS代码是;

#bar {  
margin-top:50px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3px groove #FFD700;   
}

#logo { 
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
}

和html是;

</head>
<body>
<div id="bar">
</div>
<div id="logo">
</div>
</body>
</html>

感谢您的任何帮助

Answer 1

Z:index是你的朋友

http://jsfiddle.net/BrvL2/1/

#logo { 
position:absolute;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:999;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}

Answer 2

#bar {  
margin-top:50px;
width: 1920px;
height: 30px;
background-color: #2E2E2E;
border: 3px groove #FFD700;   
    text-align: center;
}

#logo { 
position:relative;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:999;
top:0px;
}

<div id="bar">
<div id="logo">
</div>
</div>

希望这适合你。

Answer 3

这是CSS：

#wrap {
    position:relative;
    width:100%;
}

#bar {  
    position:relative;    
    margin-top:50px;
    width: 100%;
    height: 30px;
    background-color: #2E2E2E;
    border: 3px groove #FFD700;   
}

#logo { 
    position:absolute;
    background-image:url(http://placehold.it/150x150/f16b20/ffffff);
    background-size:150px;
    width:150px;
    height:150px;
    left:50%;
    margin-left:-75px;
    margin-top:-50px;
    z-index:999;
    top:0px;
}

我放入了一个包装，因此#logo将有一个父容器在定位时引用。这会将徽标浮动在菜单栏的中间。

这是小提琴：http://jsfiddle.net/BrvL2/3/

Answer 4

更改'left：'属性，直到它居中

#logo { 
position:absolute;
top:0;
left:45%;
right:0;
z-index:1000;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;

}

将图像放在CSS框内容之上。

4 个答案: