Możesz też przez użycie zmiennych w css-ie, np.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
* {
box-sizing: border-box;
}
:root {
--some-variable: 50%;
}
.parent {
position: relative;
height: 300px;
border: 1px solid red;
}
.child1 {
height: var(--some-variable);
border: 2px dotted green;
}
.child2 {
position: absolute;
top: var(--some-variable);
width: 5em;
height: 5em;
border: 5px solid #0b2e77;
background-color: #5c88e8;
}
P.S. w javascript można też za pomocą getBoundingClientRect (właściwość height)
przykład
<div class="buttons">
<button>offsetHeight</button>
<button>getBoundingClientRect</button>
<input type="range" id="range" min="300" max="600" step="10" value="300" list="range600">
<output for="range">300px</output>
<datalist id="range600">
<option>300</option><option>350</option>
<option>400</option><option>450</option>
<option>500</option><option>550</option>
<option>600</option>
</datalist>
</div>
<div class="parent">
<div class="child1"></div>
<div class="child2">2<span></span></div>
<div class="child3">3<span></span></div>
</div>
* {
box-sizing: border-box;
}
.parent {
position: relative;
height: 300px;
border: 1px solid red;
font: 500 1em system-ui;
}
.child1 {
height: 50%;
border: 2px dotted green;
}
.child2,
.child3 {
position: absolute;
width: 5em;
height: 5em;
padding: 0.5em;
}
.child2 {
top: 0;
left: 0;
border: 5px solid #0b2e77;
background-color: #5c88e8;
}
.child3 {
top: 0;
left: 10em;
border: 5px solid #026b44;
background-color: #15ef9f;
}
.child2 span,
.child3 span {
position: absolute;
bottom: 0;
}
.buttons {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.buttons input {
width: 50%;
}
window.onload = load;
function load() {
const parent = document.querySelector('.parent'),
child1 = document.querySelector('.child1'),
buttons = document.querySelectorAll('button'),
range = document.querySelector('input'),
range_output = document.querySelector('output');
buttons[0].onclick = topBox2;
buttons[1].onclick = topBox3;
range.oninput = parentResize;
function topBox2() {
const top = child1.offsetHeight,
child = document.querySelector('.child2');
setValue(child, top);
}
function topBox3() {
const top = child1.getBoundingClientRect()['height'],
child = document.querySelector('.child3');
setValue(child, top);
}
function setValue(element, value) {
element.style.setProperty('top', value + 'px');
element.querySelector('span').textContent = value + 'px';
}
function parentResize() {
parent.style.height = range.value + 'px';
range_output.value = range.value + 'px';
}
}