Position element using another element reference

Asked

Viewed 102 times

1

positions an element using the reference of the position of the div box, the element is on display None and when it receives the click event it appears on the screen, however it should appear below the div box.

<h3> Sindico<i class="taskAtiv glyphicon glyphicon-chevron-down">
    </i>
    </h3>
 <div class="box row col-sm-2 box-white">
        <p class="task">Descrição</p>
        <br />
        <p class="task">Descrição</p>
        <br />
        <p class="task">Descrição</p>
        <br />
    </div>

css

  .box {
        width: 200px;
        font: 8px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
        display: none;
        position: absolute;
        z-index: 9999999999999999;
        top: 54%;
    }
  .task {
            cursor: pointer;
            padding-left: 5px;
            margin-bottom: 0px;
            border-bottom: 1px solid #ccc;
        }

Javascript

  $(".taskAtiv ").on("click", function () {
                $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
            });
javascript jquery css html5

  • you want div to appear under "sindico"? or it’s the other way around?

  • yes, below the union

  • I don’t understand. How an element will receive a click if it is in display: none? There’s something wrong with your question.

  • only now I understood that it was for one element to be under the other, in the sense z-index of the thing, hahah... deleting my answer

2 answers

1


You can recover the position and size of the reference element and set the position of your element from the sum of them so that it is below.

var elementoReferencia = $(".taskAtiv");
var posicao = elementoReferencia.position();

$(".box").css("top", (posicao.top + elementoReferencia.height()));
$(".box").toggle();

0

  $(".taskAtiv ").on("click", function (e) {
                $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
                var referenceElement = $(".taskCheckListHeader");
                var positionElement = referenceElement.offset();
                $(".box").css(positionElement);
                $(".box").toggle();

            });

solution based on the first answer, from now on

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.