CODEWITHSUNDEEP
htmlcss
user3744225
user3744225

Reputation: 47

How do I get a div to be positioned above an image?

Here is what i got:

HTML

<div class="container">
  <div class="row_1" >

    <div class="col col-4"> 
    <div class="newstext"> nope nope</div>
     <div class="btn"> a </div>

       <img src="http://dimon12.moy.su/_ph/5/2/242933281.jpg"  width="300" height="350">


    </div>

CSS

.container {
    width:960px;
    margin: 0 auto 0 auto;


}

.row {
    overflow:hidden;
    margin: 0 0 20px 0;
    }

.col {
float:left;
margin:0 10px 0 10px;


    }

.col-4 {
    margin-bottom:20px;
    z-index:-100;

}

.col-12 {
    width:940px;
    height:135px;
   font-family: "proxima-nova"; 
   color:#f1e39b; 
    letter-spacing: .2em;
   font-size:45px;
  padding-top: 50px;

}

.newstext {
    height:50px;
    font-size:10px;
    font-family: "proxima-nova";
    padding-left:10px; padding-top:10px;
    z-index:1;
    background-color:#f1e39b;
    }

.btn{
width:50px;
height:50px;
background-color:#993;
border-radius:25px;
z-index:100;
bottom: 10px;
left: 10px; 
}

What i want is to get the .btn to be positioned in the bottom left corner of the picture. So the btn div has to be "above" the picture. I tried this via z-index but that din´t work.

Any ideas?

Here is a fiddle of how i currently looks http://jsfiddle.net/TVNEV/1/

Upvotes: 0

Views: 74

Answers (7)

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Please see below HTML and css

   <div class="container">
      <div class="row_1" >

        <div class="col col-4"> 
        <div class="newstext"> nope nope</div>
<div class="testing">    
     <div class="btn"> a </div>

           <img src="http://dimon12.moy.su/_ph/5/2/242933281.jpg"  width="300" height="350">
    </div>

        </div>

CSS

.testing {
position:relative;
}
.btn {
position:absolute;
bottom:0;
left:0;
z-index:999;
}

Upvotes: 0

Packet Tracer
Packet Tracer

Reputation: 3924

I would just use the image as a div background

#the_div {
 background-image: url('your_image.gif');
}


<div id="the_div">
  <div id ="the button"></div>
</div>

Upvotes: 0

Srinivasa Reddy
Srinivasa Reddy

Reputation: 114

This answer may help you

HTML

<div class="container">
    <div class="row_1" >
        <div class="col col-4"> 
            <div class="newstext"> nope nope</div>
            <div class="imageDiv">
                <div class="btn"> a </div>
                <img src="http://dimon12.moy.su/_ph/5/2/242933281.jpg"  width="300" height="350" />
           </div>
       </div>
    </div>
</div>

CSS

.container {
    width:960px;
    margin: 0 auto 0 auto;


}

.row {
    overflow:hidden;
    margin: 0 0 20px 0;
    }

.col {
float:left;
margin:0 10px 0 10px;


    }

.col-4 {
    margin-bottom:20px;
    z-index:-100;

}

.col-12 {
    width:940px;
    height:135px;
   font-family: "proxima-nova"; 
   color:#f1e39b; 
    letter-spacing: .2em;
   font-size:45px;
  padding-top: 50px;

}

.newstext {
    height:50px;
    font-size:10px;
    font-family: "proxima-nova";
    padding-left:10px; padding-top:10px;
    z-index:1;
    background-color:#f1e39b;
    }

.btn{
width:50px;
height:50px;
background-color:#993;
border-radius:25px;
z-index:100;
bottom: 10px;
left: 10px; 
}

.imageDiv{position:relative;}
.imageDiv .btn{position:absolute;bottom:0;left:0;}

Working Example

http://jsfiddle.net/Rn3fF/

Upvotes: 0

Simone
Simone

Reputation: 1337

You should use position: absolute. You will need three things:

  1. Make sure that the parent of the .btn element doesn't have position: static, which is the default. If you don't want to move the parent around, usually you can just set it to position: relative;
  2. Set your div to position: absolute;
  3. Set the top, left, right or bottom properties to place your button. In your case, it would be bottom: 0 and left: 0.

Upvotes: 0

Alex Wilson
Alex Wilson

Reputation: 2419

you need add position: absolute; in you .btn class

Upvotes: 0

T J
T J

Reputation: 43166

Add the following in respective classes of your css

.col-4 {
 position:relative;
}
.btn {
 position:absolute;
 bottom:0;
}

JSFiddle

Side note: It might be a good idea to read about how it works when you're about to use a new css property… :)

Upvotes: 1

aashi
aashi

Reputation: 492

just see this fiddle::http://jsfiddle.net/aashi/TVNEV/5/

you have to put the imag in a position relative div and then the button in a position absolute position inside position relative div

Upvotes: 0

Related Questions