Position One Element Relative to Another in CSS

Position DIV relative to another DIV?

First set position of the parent DIV to relative (specifying the offset, i.e. left, top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want.

It's simple and should do the trick well.

Position one element relative to another in CSS

position: absolute will position the element by coordinates, relative to the closest positioned ancestor, i.e. the closest parent which isn't position: static.

Have your four divs nested inside the target div, give the target div position: relative, and use position: absolute on the others.

Structure your HTML similar to this:

<div id="container">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div>

And this CSS should work:

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

...

How to position one element relative another using CSS/jQuery

The code u have given has the spelling mistake for position - absolute, Even if the spelling is corrected, it won't work as it needs to be relative to circle.

Try the following code

$(document).ready(function(){
            for (i=1;i<4;i++){
            var widthLabel = $('.progress .circle:nth-of-type(' + i + ') .title').outerWidth();
            var widthCircle = $('.progress .circle:nth-of-type(' + i + ')').outerWidth();
            $('.progress .circle:nth-of-type(' + i + ') .title').css({
                position: "relative",   
                left: -((widthLabel/2) - (widthCircle/2)) + "px"
            });
        }
    });

The label width is then subtracted with the circle width. This will do it

How do I position an element relative to another without taking up space

Please check the snippet, do you want the same.

$( ".icon" ).click(function() {

var offset = $(this).position();

console.log( "left: " + offset.left + ", top: " + offset.top );

$(".menu").css({"left":offset.left});

});

.icon {

  font-size: 10px;

  float: left;

  height: 30px;

  width: 30px;

  background-color: #EAEAEA;

  padding-top: 2px;

  margin-right: 3px;

  border: 0px;

  border-radius: 3px;

}

.v-divider {

  float: left;

  height: 35px;

  border: 0;

  border-right: 1px solid #d9d6d0;

  margin: 0px 5px 0px 5px;

}

.menu {

  position: fixed;

  top: 40px;

  margin-bottom: 100px;

  width: 100px;

  border: 1px solid #a1a1a1;

  padding: 5px;

  margin-top:10px;

}

.block {

  float: left;

  margin: 7px 0px 5px 0px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='v-divider'></div>

<div class='block'>

  <button type="button" class="icon">A</button>

  <button type="button" class="icon">A</button>

</div>

<div class='v-divider'></div>

<div class='block'>

  <button type="button" class="icon">A</button>

  <button type="button" class="icon">A</button>

  <button type="button" class="icon">A</button>

</div>

<div class='v-divider'></div>

<div class='menu'>

  <div id='menu'>

    <span>blabla</span>

  </div>

</div>

<div class='block'>

  <button type="button" class="icon">X</button>

  <button type="button" class="icon">A</button>

  <button type="button" class="icon">A</button>

</div>

<div class='v-divider'></div>

CSS: Positioning a child element relative to its parent using any position property on the parent

The question is:

Could I also achieve this [positioning the p element at the bottom] by using any position declaration(other than
static) for the parent?

Yes

From MDN:

A positioned element is an element whose computed position value is
either relative, absolute, fixed, or sticky. (In other words, it's
anything except static.)

---

Related Topics