Which is the most proficent way to place elements in CSS?

Question

1.00/5 (1 vote)

See more:

I have created an html code and CSS sheet. When I placed items using absolute positioning, using top and left, if I move the entire page from left side these items also seem to move in that way. What can I do to make sure when I scroll up or down, it stays the same.

.cont{
position: absolute;
top:10px;
right:30px;
}

What I have tried:

I have tried different positions other than absolute and even flexbot to place the items evenly and ensure that when I move, it also moves. None of them seem to work.

Posted 28-Jan-21 11:53am

Member 15058938

Updated 29-Jan-21 2:20am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-01-28T22:45:00

You haven't provided any details of your actual requirements, so all we can do is point you to the documentation.

position - CSS: Cascading Style Sheets | MDN[^]

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks[^]

CSS Grid Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Grid | CSS-Tricks[^]

position: sticky; | CSS-Tricks[^]

W∴ Balboos, *GHB* · Answer 2 · 2021-01-29T02:20:00

On the very rare occasion I needed that effect, it was position:fixed

Now one thing you should be aware of: when you use positioning, it is often related to the containing element (i.e., if you wrap your elements in a <div> then the absolute position is relative to that <div>).

If you want to fix an elements to a particular position, treat it as external to all of the other elements (and why not? it's expected to ignore them).

Which is the most proficent way to place elements in CSS?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0