CODEWITHSUNDEEP
csspositionoverlay
Evandro Silva
Evandro Silva

Reputation: 1402

Button in front of div

I'm not a CSS expert. I'm trying to place an <input type="button"> in the center of an <img> and I'm having some trouble doing so. Here's a fiddle and here is my HTML:

<div id="avatar">
    <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
    <input id="btnAvatar" class="button" type="button" name="Button" value="Change">
    <p>Text</p>
</div>

I want the input to be displayed over the image, also, the text need to be at the right. I tried using:

img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}

But it only works on chrome / safari, on other browsers, the button is placed after the image and not in front of it.

What is the best way to do this?

Obs.: The space where the button is, needs to be empty, or else, the text will move up.

This is how it's displayed on chrome:

enter image description here

This is how it's displayed on firefox:

enter image description here

Upvotes: 3

Views: 11743

Answers (5)

Pais
Pais

Reputation: 116

There is a simple and clean method for doing this code. The trick is to use the DIV tag to contain and position everything in place.

  1. Use a main DIV to contain everything and give it the position:relative property.
  2. Place the img and input tags in a single DIV and assign this DIV the float:left property.
  3. Using CSS to select the P tag and float it to the left. This will position the text beside the DIV containing the img and input.
  4. Now assign the input tag the position:absolute property while using the properties TOP & LEFT to postion it into place.

Here's an example: 

<div id="avatar-container">
     <div id="avatar-image-btn">
          <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar"  />
          <input id="btnAvatar" class="button" type="button" name="Button" value="Change">
     </div>
     <p>Text</p>
</div>

<style> 
    #avatar-container { position: relative; }
    #avatar-container p { float: left; }
    #avatar-image-btn { float: left; }
    #avatar-image-btn img { }
    #avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>

See, clean and simple, works every time and is multi-browser compatible.

*The margin property can cause a mess when used without caution. Best practice is to use it for stacking tags in divs and not for positioning with large gapping margins.

Upvotes: 4

mr. Holiday
mr. Holiday

Reputation: 1800

use z-index

input { position: absolute; margin:140px 0px 0px 130px; z-index:2}

this is pushing your button one layer up

after understanding the question correctly here is a solution 

img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}

as mentioned bellow in comments the problem was in positioning

Upvotes: 2

Richard Hedges
Richard Hedges

Reputation: 1188

This should do it: http://jsfiddle.net/a6tA7/9/

I would recommend you use top: and left: to position the input element rather than margin:

Upvotes: 1

Brian McDonald
Brian McDonald

Reputation: 116

You need to specify the x and y positions on an absolute position. Change the css for input to this:

input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}

Upvotes: 4

Sergiy T.
Sergiy T.

Reputation: 1453

You may add position:relative for #avatar and give #btnAvatar top:0; left:0;

Upvotes: 1

Related Questions