Exchange the position of HTML Ivs

Asked

Viewed 227 times

-1

How the image shows. I have a div mother containing 5 div vertically aligned.

How do I change the position of the last div contact positioning it between home and services without having to change the HTML structure ( simply using CSS or JS).

I tried to use position: relative and position: absolute and move the div purposefully top. The problem is that when moving the element it is superimposed on the others (above).

What would be the solution to this case ?

inserir a descrição da imagem aqui

javascript html5 css3

  • Why exactly does it need to be in CSS?. The ideal would be to change HTML or dynamically with Javascript.

  • @mauhumor changed the question... A solution with Js is also valid !

  • Explain the context better, and add the HTML of the relevant snippet, which is easier.

  • 2

    Possible duplicate of You can change the vertical order of Divs by CSS?

1 answer

1


As the question cited as duplicate does not allow a solution with Javascript, I will put here a simple using jQuery.

Considering the following HTML structure:

<div id="menu">
  <div>Home</div>
  <div>Services</div>
  <div>Products</div>
  <div>Our puppies</div>
  <div>Contact</div>
</div>

We can use the following code with jQuery to reposition the last div, placing it in second position.

$(function () {
  var contact = $("#menu div:last-child");
  var home = $("#menu div:first-child");

  home.after(contact);
});

See this example working here.

Browser other questions tagged javascript html5 css3

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