Exploring some examples to gain insights into positioning and more, aiming to elevate your css-skills.
Prioritize reviewing the html code first to observe the outcomes
Start by understanding block-level/inline elements.
* {
outline: 1px solid
}
div.iHaveKids {
padding: 25px
}
/* all childs of div*/
div > * {
background-color: red
}
b {
background-color: yellow;
width: 100%;
}
b.running {
margin-left: 40px
}
span {
background-color: pink
}
div.clearMe {
width: 50px;
}
<div>This is a beautiful block-level element</div>
<span>This is an inline element</span>
<div>A block-level element's width is 100% if not set</div>
<div class="iHaveKids">A block-level element's height is designed to fit its children
<div>I'm a child</div>
<div>Me tooooooo</div>
<div><b>A block element can have margins and/or paddings but I'm an inline element</b>
</div>
<div><b>Even when I have a width set, I just ignore them because I'm an inline element</b>
</div>
<div><b class="running away">However, I can set margin-left and/or margin-right</b>
</div>
</div>
<span>I'm an inline element<span>me toooo and I'm inside an inline element</span>
<div class="clearMe">Block-level element</div>
<div>Block-level elements start at a new line in the document even if there is enough room</div>
</span>
Now let's dive into position:
* {
outline: 1px solid;
}
div.example {
background: red;
}
.example.ex1,
.example.ex2,
.example.ex3,
.example.ex4,
.example.ex5,
.example.ex10 {
position: absolute;
}
span {
background-color: yellow
}
div.ex4 {
z-index: 2500;
}
.example.ex6,
.example.ex7,
.example.ex8,
.example.ex9 {
position: relative;
}
.ex8,
.ex9 {
top: 40px;
}
.ex9 {
width: 500px;
height: 500px;
}
.ex10 {
bottom: 0;
}
<div>I'm a block-level element with default position: static</div>
<div class="example ex1">I'm an absolute element with position: absolute
<span>My parent has an absolute position, I'm just an inline element</span>
</div>
<div class="example ex2">I'm an absolute element with position: absolute
<span>My parent also has position: absolute. If no top, left, bottom or right is defined, I will place myself in the normal document flow without considering other positioned elements.</span>
<span>If two or more position: absolute elements overlap, the latest one in the document-flow gets higher stacking order.</span>
</div>
... (remaining content) ...
<div class="example ex9">I have position: relative, I'm a block-element with a width of 500px and a height of 500px. I also have top: 40px;
<div class="example ex10">I'm a block-level element with position: absolute inside an element with position: relative. I also have bottom: 0 so I position myself 0px away from the bottom line of my nearest positioned ancestor. If I have no nearest positioned ancestor, I take the document root.</div>
</div>
And now, discussing percentage width and height:
div {
position: relative;
}
div > div {
position: absolute;
}
div.parent {
top: 10px;
height: 400px;
background-color: red;
}
div.child {
background-color: yellow;
top: 10%;
bottom: 10%;
}
<div class="parent">
I'm position: relative;
<div class="child">
I'm position: absolute;
<br>Firstly, I look at top, right, bottom, left
<br>Then, I consider my content and adjust even if I'm a block-level element
<br>To calculate percentages, I refer to my parent
<br>My parent has a height of 400px
<br>Using top: 10%, meaning I will be positioned at 40px
<br>
</div>
</div>
Let's address your final question:
What is the correct approach for utilizing percentage width/height and position simultaneously?
Percentages are calculated based on the
maximum available space. For instance, in the last example
top: 400px;, therefore
10% == 40px. Once you comprehend how elements interact (root, parent, child, siblings, ancestors), executing such tasks becomes much simpler. Continuously read and learn about the disparities among various types of elements.
Do I need to set #block-block-1 {height: 100%, width: 100%}, for it to apply universally?
As mentioned in the examples, applying 'width: 100%' to a block-level element serves no purpose. Understanding how child elements respond to dimension settings requires knowledge of their type (block, inline, grid, flex, table, list, replaced,... element) and behavior.
Similarly, conflicting interpretations may arise when one considers Relative position as another's absolute position, echoing the dilemma between height and width.
An element with
position: absolute; seeks the
nearest positioned ancestor; if none is set, it defaults to the
document.root.
For further information, check out:
Percentage guide on Mozilla
CSS length properties on CSS-Tricks
Distinguishing between “Block” and “Inline” elements on ImpressiveWebs