CSS postion align-CodePudding

I don't understand why when I change position to relative, the "facebook and Facebook helps you connect and share with the people in your life" lies at the top of the page. I've just started learning css for three days. Thanks!!!!

This is the html file

<!DOCTYPE html>
<html>
 
<head>
<link rel="stylesheet" href="henry.css">
</head>
 
<body>
    <div >
        <h1 >facebook</h1>
        <p >Facebook helps you connect and share with the people in your life.</p>
        </div>
</body>
 
</html>

css file

.h1{
    position: absolute;
    left: 10%;
    top: 40%;
    width: 550px;
}

CodePudding user response：

If you need align elements, first try flexbox(remenber to add flex on the parent elements what you want align): https://css-tricks.com/snippets/css/a-guide-to-flexbox/

After some struggle with flexbox, try to align with grid: https://www.w3schools.com/css/css_grid.asp

FLEXBOX X GRID:

Flexbox: unidirection align, to aligning center vertical all elements in a list of posts

Grid: bidirectional align, generaly use to structure your page the places they will be "header, footer, menu, body..." and inside FOOTER you can use flexbox and is very common

(in first view is hard, but one day make sense to you :D)

Theses properties (flexbox, grid..) is a fluid structure where one HTML element interfere/support to another, try in "inspect elements"(in browser) and play to delete some HTML Nodes like DIVs, SPANs... and see how to behave elements in screen.

Inside these elements add a div (equal you create) with position absolute. and in inspect element (in browser) and delete these element. You will understand the element position "put it out" to structure where element interfere to anoter.

CodePudding user response：

position:absolute positions an element relative to its first not static ancestor element. In this case, the div with class name "h1", the one that wraps those two sentences, has as ancenstor the tag: this makes your div go at the top.

Little tip: avoid giving key words as class names, it can be confusing. I'd switch from to or

CodePudding user response：

position: relative cannot be aligned using top, bottom, left, or right. It instead bases its' position based off of where other elements are. Since there are no other elements in the DOM, the element will sit at the top. position: absolute, which is what I assume you were using before ignores all other elements. If you would like to give this div an offset, use the margin property. (margin-top, margin-left, margin-bottom, margin-right).