-3

I haven't used float for the divs in CSS rather I have used position. I used relative to position all the divs but all of them gets jumbled up in other screen resolutions. What am I doing wrong please clarify since I am new to HTML. Thanks in advance.

Saugat Awale
  • 3
  • 2
  • Welcome to Stack Overflow, please read this and improve your question: http://stackoverflow.com/help/mcve. – max Oct 21 '15 at 22:25
  • You should google "css positions tutorial" – Steyn Oct 21 '15 at 22:28
  • See [Position Relative vs Position Absolute?](http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute) The `static` is the default one. The `fixed` is like `absolute` but the containing block is the viewport. The `sticky` is a mix of `relative` and `absolute`. – Oriol Oct 21 '15 at 23:01

1 Answers1

1

You shouldn't really use the position property unless you want something specific out of it. Block and inline elements do most of the work when it comes to position. With that said we still need the position:property in many cases. The most used kind of positions are relative and absolute, and I can help you understand these.

position: absolute; allows you to assign a specific position example:

div {
 position: absolute;
 top: 50px;
 left: 50px; 
}

What the previous code does is place the selected div element 50 pixels away from the top border and 50 pixels away from the left border. The tricky part is that you need to specify what your borders are going to be.

For this we use position: relative;. Example:

.parent {
  position: relative;
}

.child{
  position: absolute;
  top: 50px;
  left: 50px;
 }

What the previous code does is set the parent element to be the reference to it's child element. So the position: absolute;child will be positioned 50 pixels away from it's .parenttop and left border. Hope this helps.

Here's w3schools article about positioning : W3 Positioning

Fernando Salas
  • 406
  • 4
  • 11