Change elements using CSS?

Question

I have a pretty simple layout, for example:

<div class="card">
    <span class="attack">1</div>
    <span class="defence">2</div>
</div>

They are located one above the other with a simple display: block. What I want to achieve is when the card is in certain areas, the “attack” shows below, and the “defense” shows above. I know I can do this with jQuery, but can I achieve the same effect using pure CSS?

Answer 1

Technically, this is a business rule business that is not an area of ​​your cosmetic layer.

HTML- - , , , ( , ) .

, JQuery - . CSS .

: ", - , , ? ( , ) ?"

, , , .

Answer 2

, :

.card {
    width: 100px;
    height: 150px;
    float: left;
}

.attack, .defence {
    width: 100px;
    height: 75px;
    clear: right;
}

/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
    float: left;
}
.attack-top .card .defence {
    float: right;
    height: Wpx;
    padding-top: Xpx;
}


/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
    float: right;
    height: Ypx;
    padding-top: Zpx;
}
.defence-top .card .defence {
    float: left;
}

, , , .

• " ". , (.attack-top .defence-top, , ).
• , .card 100 150 . , . .card /, - , , , ( ).

Answer 3

- .card.

.card      { width:100px; height:50px; position:relative; }
  .attack  { width:100px; height:25px; position:absolute; top:25px; }
  .defense { width:100px; height:25px; position:absolute; top:0; }

() .defense. : CSS, .

Answer 4

, . "" CSS, CSS , . jQuery , .

Answer 5

If you know the height of the element, you can use position: relative(with positive and negative values ​​respectively) or position: absolute. But this is all very hacks and has many side effects - I would do it in Javascript instead.

Answer 6

You can do this using (if you only want to swap in div.card):

.card .attack {
   position: relative;
   top: 1em;
}
.card .defence {
   position: relative;
   top: -1em;
}

But, as others have said, this can have some unintended side effects. For example. the above pattern will correctly move the swap position for only 1 string blocks.