CODEWITHSUNDEEP
htmlcsscss-position
Ari
Ari

Reputation: 4969

CSS Position - top 100% Is Not Equal To bottom 0

I noticed this when I assign fixed position to an element for css3 animation, that top: 100% isn't gave the same effect as bottom: 0;. It's locate the element outside of document, while bottom:0; is still showing the whole of the element.

JSFIDDLE DEMO

Is there an opposite of css position top:0; that is automatically give the same effect as bottom:0;?

Upvotes: 3

Views: 12221

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

.top{
    position:fixed;
    top: calc(100% - 60px);    
}

is equal to 

.bottom {
    position:fixed;
    bottom:0;    
}


.top{
    position:fixed;
    top: calc(100% - 60px); /*60px the height of the element*/
    right: 0
}

.bottom {
    position:fixed;
    bottom:0;  
    left: 0
}
<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>

or 

.top{
    position:fixed;
    top: 100%; 
    margin-top: -60px; /*60px the height of the element*/
    right: 0
}

.bottom {
    position:fixed;
    bottom:0;    
}
<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>

Upvotes: 1

Weafs.py
Weafs.py

Reputation: 22992

That is because top value takes the top edge as a reference point, you need to use transform: translateY(-100%) to make the bottom edge a reference point.

.top {
  position: fixed;
  top: 100%;
}
.bottom {
  position: fixed;
  top: 100%;
  transform: translateY(-100%);
}
<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>

Upvotes: 3

Related Questions