CODEWITHSUNDEEP
css
Jonas
Jonas

Reputation: 5149

How to keep a transformed element behind another element?

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
}
<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

This example is also in here: https://jsfiddle.net/jasajona/vmzfgkcb/ How to keep transformed background div behind foreground? Found several examples but they seems not to work in this situation.

Upvotes: 3

Views: 1569

Answers (4)

Nisarg Shah
Nisarg Shah

Reputation: 14541

You can use the isolation property - which creates a new stacking context - on the foreground element.

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  isolation: isolate;
}
<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

Upvotes: 1

Scath
Scath

Reputation: 3824

You can give the foreground position:relative and it will appear on top like this:

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);  
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  position:relative;
}
<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

Upvotes: 1

nvioli
nvioli

Reputation: 4209

The problem is that transforming an element creates a new "stacking context", which supersedes the source order that would otherwise determine which element is on "top".

There are several ways of dealing with this problem, but my favorite way of getting around this strangeness of CSS's z-index calculations is to add an opacity property to your foreground element:

.container{
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
} 

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  opacity: 0.999;
}
<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

Here are two resources about z-index stacking context:

Upvotes: 2

somethinghere
somethinghere

Reputation: 17350

Just add a position: relativeto both layers, and then sort them using z-index (if position is not set, it's considered static and static does not account for z-indexes)

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
  position: relative;
  z-index: 1;
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

Upvotes: 4

Related Questions