css posiition relative to its parent or not ?

//=== https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent

#father {
position: relative;
}

#son1 {
position: absolute;
top: 0;
}

#son2 {
position: absolute;
bottom: 0;
}
This works because position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative."

If you don't give any position to parent then by default it takes "static"

//===

css float right make elem outside bounding box ?

//=== https://stackoverflow.com/questions/2062258/floating-elements-within-a-div-floats-outside-of-div-why

...

The problem is that floating elements are out-of-flow:

An element is called out of flow if it is floated, absolutely positioned, or is the root element.
Therefore, they don't impact surrounding elements as an in-flow element would.

...
//===

css overflow, text-overflow, overflow-wrap,

//=== css overflow
overflow, text-overflow, overflow-wrap,

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow_hover
div.test {
white-space: nowrap;
width: 12em;
overflow: hidden;
border: 1px solid #000000;
}

div.test:hover {
text-overflow: ellipsis;
overflow: visible;
}


https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working

text-overflow:ellipsis; only works when the following are true:

The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
The element must have overflow:hidden and white-space:nowrap set.


//===
overflow-y: auto, scroll, ...


//=== css display
display: inline, inline-block, block, none,


//=== to show/display bounding box
style={border: 1px solid #FF0;}

三橫 icon

//=== https://www.abeautifulsite.net/the-unicode-character-for-menu-icons

three-line navigation menu icon

...
This is actually a Chinese glyph (the trigram for heaven),
but in the western world you'd be more apt to recognize it as
the "hamburger" navigation menu icon.

It's available as the following HTML entity:
☰

Here's how you might use it in a navigation menu:
☰

...


//=== https://www.w3schools.com/howto/howto_css_menu_icon.asp

use CSS to create menu icon

html snippet
<div></div>
<div></div>
<div></div>


css snippet
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}