- CSS - Logo'yu üst menünün önünde göstermek

[15M41L]

Arkadaşlar logo menünün arkasında kaldı.
Logoyu menünün önünde nasıl gösterebilirim?

bqjVKP

body{
   background-image:url(Tux.png);
   background-position:1% -10%;
   position:absolute;
   background-repeat: no-repeat;
   background-size: 100px 100px;
   background-color:darkgreen;
   margin:0px;
}

#top{
   background-color:#006e2e;
   text-align:right;
   padding:25px;
   margin:25px 0px 25px 0px;
}

 

[cngzkyz]

Logo için ayrı bir class oluşturup z-index kullanmalısınız.

 

[yclywz]

Arkadaşlar logo menünün arkasında kaldı.
Logoyu menünün önünde nasıl gösterebilirim?

bqjVKP

body{
   background-image:url(Tux.png);
   background-position:1% -10%;
   position:absolute;
   background-repeat: no-repeat;
   background-size: 100px 100px;
   background-color:darkgreen;
   margin:0px;
}

#top{
   background-color:#006e2e;
   text-align:right;
   padding:25px;
   margin:25px 0px 25px 0px;
}

Aşağıdaki css ve html işini görecektir.

/* CSS */
body{
background-color:darkgreen;
}

#logo{
background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/TuxFlat.svg/848px-TuxFlat.svg.png) center center no-repeat;
position:absolute;
top:10px;
width:100px;
height:100px;
background-size: 100px 100px;
}

#top{background-color:#006e2e;
text-align:right;
padding:25px;
margin:25px 0px 25px 0px;
}

/* HTML */
<div id="logo"></div>
<div id="top">
<a href="">Lorem Ipsum</a>
<a href="">Lorem Ipsum</a>
<a href="">Lorem Ipsum</a>
<a href="">Lorem Ipsum</a>
<a href="">Lorem Ipsum</a>
</div>
<hr/>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit ipsum eu mauris interdum fringilla. Nullam bibendum metus lobortis tellus ornare vestibulum. Donec sagittis nulla nec ornare ullamcorper. Maecenas ac eros in tortor porta pretium nec in erat. Cras hendrerit egestas sem vel feugiat. Donec ligula dolor, sodales sed euismod vitae, pellentesque ut dolor. In hac habitasse platea dictumst. In augue mi, tincidunt id justo eu, rutrum tristique nisl. In ullamcorper imperdiet volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim et justo vitae tempus. Praesent mi quam, placerat varius nisl a, congue gravida libero. Quisque ac pellentesque urna, vitae pretium tortor. Nullam risus nunc, pretium sit amet vehicula in, rutrum non dolor. Integer pharetra velit ac sem rutrum, at posuere felis accumsan. Nulla facilisi. </div>
<hr/>
<div id="footer">Coplyleft <img src="Copyleft.png" height="20" width="20"/></div>