Względny element nadrzędny, pozycjonowanie bezwzględne w pionie w procentach?

Question

Próbuję utworzyć pionowo ustawioną wartość procentową DIV. Mam kontener nadrzędny, aby ustawić wartość względną, a element div ustawiony na wartość bezwzględną. Działa to dobrze, kiedy położenie zawartości div z pikseli, ale gdy próbuję procenty procenty są brane pod uwagę:

.container { 
position: relative; 
} 


.content { 
position: absolute; 
left: 10%; 
top: 50%; 
} 


<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div. 
</div></div> 

Zawartość div pojawia się w górnej części strony, z pominięciem 50% w pionie miejsca. czego mi brakuje? Z góry dziękuję!

Answer 1

Pozycjonowany element jest wyjęty z naturalnego przepływu dokumentu, co oznacza, że ​​pojemnik ma zerową wysokość i szerokość.

10% i 50% tej zerowej wysokości i szerokości wynosi, oczywiście, zero.

Jeśli podasz kontenerowi wysokość i szerokość, Twoje procentowe pozycje zaczną działać tak, jak chcesz.

Here is a working example.

.container { position: relative; width:500px; height:500px; } 

Answer 2

Najprawdopodobniej trzeba dodać height: 100% do .container div:

.container { height: 100%; position: relative; } 

i ewentualnie wszystkie elementy przodka

html, body { height: 100%; } 

Answer 3

odpowiedź @Jaime Dixona był wielki. Piękne, dwie świetne koncepcje tam podane.

1. Procent, jednostki względne odnoszą się do czegoś, trzeba zrozumieć, co jest pojemnik odniesienia, do którego te wartości zostały obliczone.

2. Nawet jeśli masz pojemnik, MOŻNA zachowywać się arbitralnie, jeśli pojemnik ma wymiary "auto". Aby mieć przewidywalne zachowanie, upewnij się, że kontener ma wymiar lepszy niż zwykłe "auto". OR, jeśli pojemnik posiada również 100%, a jego rodziców i tak dalej, upewnij się, że masz instrukcję css, w którym masz określoną wysokość html elementów, ciała:

przykład:

html, body { 
    height: desired_value; 
} 

Answer 4

Welp, mój pierwszy wpis w SE. Dla tych, którzy zobaczą to w przyszłości, możesz faktycznie użyć wysokości widoczności jako miary procentowej.

.container { 
    position: relative; 
    top: 10vh; // 10% of height from top of div 
}