better way to position elements in css?-CodePudding

hello so im new to html and CSS, I'm using this way to move around elements.. is this the right way to move elements? is there an easier way? because I moved them like 100 times to get a perfect way.. please don't judge mt class naming, its just for testing xd.. I'm really struggling of moving around elements in gernal, so I'm doing multiple examples to understand it more. thanks in advance! *: in left/in right means like between them lol..

HTML:

    <footer>
    <h1 >left</h1>
    <h1 >in left</h1>
    <h1 >right</h1>
    <h1 >in right</h1>
    <h1 >middle</h1>
 </footer>

CSS:

.f{
    position: absolute;
    left: 250px;
    
}
.ff{
    position: absolute;
    right: 0px;
}

.fff{
    position: absolute;
    right: 250px;
}
.ffff{
    position: absolute;
    right: 700px;
}

.foot{
    display: inline;
    color: black;
    text-align: center;
}
footer{
    height: 100px;
    padding: 25px;
    
    background-color: white;
}

CodePudding user response：

My suggestion would be to get to know flexbox. It will allow you to position your elements in many different ways and for it to stay responsive. The problem with using pixels for positioning is that if you were to make your screen smaller, they will potentially go off screen or if you made the screen larger if would not take the full screen.

https://flexboxfroggy.com/ is a pretty cool way to learn flex.

Example of horizontally aligning content on the x axis.

<footer style="display: flex; justify-content: center">
    <h1 >left</h1>
    <h1 >in left</h1>
    ...
</footer>

CodePudding user response：

When using position absolute, a nice trick I use to avoid having to update the code hundreds of times trying to get the element into the perfect position is to set it once as a guess then go into chromes dev inspector. from inside the dev inspector, find the element that you are trying to position and look for the css styles that you applied. Once you've located the style in the inspector, you can click and drag on the px value and it will move the element on the page in real time.

One thing to note about position: absolute; is that it doesn't behave very nicely in responsive layouts. so your mobile layout will likely need tweaking to get things looking good!

CodePudding user response：

there are many ways to move elements around in CSS but the main ones that are considered best practice are to use either: Grid or Flexbox. I recommend you watch a few tutorials on Flexbox and Grid that will help you a lot.