CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jessica
Jessica

Reputation: 9830

Position div at position of another div

I am trying to position an div exactly on top of another. I'm doing it through JQuery (and not css), because I have 3 elements. When the mouse goes over one of the elements, I want the div to position itself to that element.

I finally got it to work, but when the div goes over to the element, the div goes there, and adds 8px to the left.

How can I position a div at the exact position of another element?

JSFiddle

$('.inner').mouseover(function() {
  var pos = $(this).position();
  $("#back").css('left', pos.left + "px");
});
#wrapper {
  width: 600px;
  height: 30px;
}
.inner {
  display: block;
  float: left;
  width: calc(100% / 3);
  height: 50px;
}
#back {
  background-color: yellow;
  height: 100%;
  z-index: -1;
  width: calc(100% / 3);
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="inner">First Option</div>
  <div class="inner">Second Option</div>
  <div class="inner">Third Option</div>
  <div id="back"></div>
</div>

Upvotes: 1

Views: 195

Answers (4)

justinw
justinw

Reputation: 3966

You can get rid of the extra space by setting position: absolute to the #back element. DEMO

Easy, right? But why?

When using position: relative, as stated in the W3schools property page:

An element with position: relative; is positioned relative to its normal position.

By default all elements have position: static, which basically means that where and how you construct your elements in your document, that's where they will be and it's really referred to as not being positioned.

When you add position: relative to an element, it takes it's current position and then adds or subtracts it's position further depending on what values you gave to the properties top, right, bottom or left (also note, the major difference between static and relative is that relative can accept these properties, they won't affect a static element).

In your case you were adding the property left with a value you were getting from the position() method (let's say 8px like your first example). That means that#backwas being a positioned8px*from* the it's original position, which was already positioned8pxfrom the left (due to the document'spadding/margin`).

In order to make the element not be affected by margin or padding you have to take it out of the document flow with position: absolute. With absolute positioning the element won't "take up space" in the document like a static or relative element will, so it won't then be affected by parent elements' padding or margin properties.

Unless you are 100% positive no parent elements will have margin or padding value that will affect the element that is positioned relative then sometimes you can get away with not changing the element to absolute.

This demo shows the #back element with position: relative.

This demo shows why you should give it position: absolute (once padding is introduced, everything gets messy.

With that same padding and position: absolute everything is working as intended again- DEMO (pretty much).

Upvotes: 1

wmeade
wmeade

Reputation: 359

Add position: relative to #wrapper.

So #wrapper should look like:

#wrapper {
    width: 600px;
    height:30px;
    position: relative;
}

Upvotes: 0

Zumry Mohamed
Zumry Mohamed

Reputation: 9558

.wrapper should be relative position and .back should be absolute position

$('.inner').mouseover(function() {
  var pos = $(this).position();
  $("#back").css('left', pos.left + "px");
});
#wrapper {
  width: 600px;
  height: 30px;
  position: relative;
}
.inner {
  display: block;
  float: left;
  width: calc(100% / 3);
  height: 50px;
  background-color: green;
  
  
}
#back {
  background-color: yellow;
  height: 100%;
  z-index: 125;
  width: calc(100% / 3);
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="inner">First Option</div>
  <div class="inner">Second Option</div>
  <div class="inner">Third Option</div>
  <div id="back"></div>
</div>

Upvotes: 2

Suraj Ahirrao
Suraj Ahirrao

Reputation: 182

back div should have position absolute to get on other div's.

Please find updated jsFiddle

Upvotes: 0

Related Questions