-1

I have a logo_png class,

and if I use a text, it will works fine.

but if I use a image of the class, it will goes wrong:

enter image description here

you see the logo img is on top of the background image.

I want the image is like first snapshot, overlap the background image.


this is the code, the annotation is the logo.

<div class="logo">
    <a class="logo_png" href="#"><h1>口耳教育</h1></a>
    <!--<a><img class="logo_png" src="./images/logo.png"></a>-->
</div>

the class code:

.logo_png {
    position: absolute;
    z-index: 9999;
}

the background image code is bellow:

<div class="ban-top-con">
    <div class="top_nav_left">
        <nav class="navbar navbar-default">
          <div class="container-fluid">
      .....

its code is like this:

nav.navbar.navbar-default {
    background: transparent;
    border: none;
    top: 48px;
    position: absolute;
    z-index: 9999;
    right: 98px;
}
3
  • 1
    Can you put up a URL showing this in detail please?
    – sassquad
    Oct 26, 2018 at 13:17
  • 1
    Use an image with a transparent background? Oct 26, 2018 at 13:17
  • can you add a piece of code snippet here it will be helpful
    – Viira
    Oct 26, 2018 at 13:26

1 Answer 1

0

Add position:relative; to the parent class to define its position

Hope it helps :)

.logo{
  position:relative;
  padding:30px;
  height:150px; 
  width:100%;
  background:url('https://www.w3schools.com/cssref/paper.gif');
}

.logo_png{
  position:absolute;
  top:25px;
  left:25;
  width:80px;
  height:80px;
}
<div class="logo">
  <div class="logo_png"><a href="#"><img src="https://www.w3schools.com/tags/smiley.gif"></a></div>
  </div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.