Handling divs in CSS-3-CodePudding

how can we move div on a webpage at any position, what is an accurate CSS property for overcoming or handling this problem? I can't set the position of multiple divs at different places on a web page?

CodePudding user response：

You can use position: relative; on the parent element and position: absolute; together with top, right, bottom, left CSS properties on the children. Or you can use position: fixed on the element with top, right, bottom, left CSS properties. Example

<div style="position: relative;">
  <div style="width: 100px;height: 100px;position: absolute;top: 0;right: 0;background: red;"></div>
  <div>Sit adipisicing et deserunt laborum consectetur tempor proident eu duis ex ut id eu deserunt occaecat excepteur veniam ea laborum esse velit consectetur cillum et nulla non cillum magna aute esse velit dolor esse mollit dolor anim duis dolor.</div>
</div>

CodePudding user response：

Elaborating on @ruleboy21's answer - Let's say div A is the element you want to freely control.

Now if you want to control div A anywhere inside another parent element, you use position: relative on the parent element and use position: absolute on div A and control it using left, right, top and bottom.

If you want to control the div inside the viewport of the webpage, so it is independent of other divs regardless of where it exists in the DOM hierarchy, you use position: fixed and control it with left, right, top and bottom.