Force two elements to always occupy the same space

Question

Force two elements to always occupy the same space

Navigation

#1 by (3 votes)

1

How do two elements always occupy the same space, regardless of browser and screen size?

I used transform translateX but when testing on my cell phone it did not work, here I put -18px , in my application I had to put -45px to desktop and -43px to cell:

#plus {
    transform: translateX(-18px) rotate(90deg);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<i class="fas fa-minus"></i>
<i id="plus" class="fas fa-minus"></i>

The idea is that the second icon will spin to toggle between + and -

css

asked by anonymous 16.09.2018 / 03:31

1 answer

Problems with the 'continue' or 'while' command in Python Custom drag and drop Javascript does not work in firefox

score 3 · Accepted Answer

For both elements occupy the same place, use position: absolute on the #plus icon and it will overlap the first one, but you must put them inside the same container, it can be span because it does not change the layout . But span also needs position: relative :

span.icone{
   position: relative;
   background: red; /* apenas para mostrar a área ocupada pelo span */
}

#plus {
   transform: rotate(90deg);
   position: absolute;
   top: 0;
   left: 0;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<span class="icone">
   <i class="fas fa-minus"></i>
   <i id="plus" class="fas fa-minus"></i>
</span>

In this case you do not need to reposition one of the elements with translate .

For Safari, you need to add the -webkit- prefix to transform :

#plus {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

Alternative with native classes

You can use native component classes to stack the two icons by doing only the second CSS path rotation. Following the same example above, putting the icons inside a span , put the fa-stack class in the container and the fa-stack-1x class in each icon ( 1x is the normal size of the icon):

.rot {
   transform: rotate(90deg);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<span class="fa-stack">
   <i class="fas fa-minus fa-stack-1x"></i>
   <i class="fas fa-minus fa-stack-1x rot"></i>
</span>