HOME | DD

Description
/* ---- Goners / Importants ---- */ body div#devskin10621483 .gr { padding:0!important; } body div#devskin10621483 .gr-top img, body div#devskin10621483 .gr1, body div#devskin10621483 .gr2, body div#devskin10621483 .gr3, body div#devskin10621483 .tri, body div#devskin10621483 .prevlink, body div#devskin10621483 .lit img, body div#devskin10621483 .external:after, body div#devskin10621483 .user-symbol, body div#devskin10621483 .list img, body div#devskin10621483 .commentslink, body div#devskin10621483 .gr-top span { display:none; } /* ---- Universal Selector ---- */ body div#devskin10621483 * { background:transparent; border:none; margin:0; padding:0; } /* ---- user symbols ---- */ body div#devskin10621483 .banned.username:before { content:'!' !important; } body div#devskin10621483 .group.username:before { content:'#' !important; } body div#devskin10621483 .regular.username:before { content:'~' !important; } body div#devskin10621483 .hell.username:before { content:'*' !important; } body div#devskin10621483 .hell-beta.username:before { content:'=' !important; } body div#devskin10621483 .premium.username:before { content:'*' !important; } body div#devskin10621483 .beta.username:before { content:'=' !important; } body div#devskin10621483 .senior.username:before { content:'`' !important; } body div#devskin10621483 .volunteer.username:before { content:'^' !important; } body div#devskin10621483 .admin.username:before { content:'$' !important; } /* ----- List tweaking ----- */ body div#devskin10621483 ul, body div#devskin10621483 ol, body div#devskin10621483 ul ul, body div#devskin10621483 ol ol, body div#devskin10621483 ul ul ul, body div#devskin10621483 ol ol ol { margin-left:30px; } /* ---- gr-box ---- */ body div#devskin10621483 .gr-box { background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; width:400px; border:1px solid #808080; border-bottom:none; border-bottom-right-radius:4px; -moz-border-bottom-right-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; -moz-border-bottom-left-radius:4px; -webkit-border-bottom-left-radius:4px; margin:auto; margin-bottom:15px; } /* ---- gr-top ---- */ body div#devskin10621483 .gr-top { background:url('https://fc06.deviantart.net/fs71/f/2013/319/7/a/infofiximage_by_celvas-d6udxpe.png') no-repeat center top; width:400px; height:92px; } /* ---- gr-top h2 ---- */ body div#devskin10621483 .gr-top h2 { padding-top:40px; color:#e9e9e9; font-family:'Verdana', sans-serif; font-size:12pt; font-weight:600; text-align:center; } body div#devskin10621483 .gr-top h2, body div#devskin10621483 .gr-top h2 a, body div#devskin10621483 .gr-top h2 a:hover { color:#e9e9e9; } /* ---- content div ---- */ body div#devskin10621483 .content { margin-bottom:-30px; padding:15px 20px; color:#333; text-align:justify; } /* ---- blockquote ---- */ body div#devskin10621483 blockquote { border:1px solid #333; width:80%; margin:auto; padding:10px; } /* ---- black bg span ---- */ body div#devskin10621483 span.blackbg { background:#a11300; padding:0 1px; color:rgb(255, 255, 255); color:rgba(255, 255, 255, 0.0); } /* ---- footer ---- */ body div#devskin10621483 .stfooter { background:url('https://fc06.deviantart.net/fs71/f/2013/319/7/a/infofiximage_by_celvas-d6udxpe.png') no-repeat 0 -262px; width:400px; height:11px; }

I'll warn you in advance, this is not a reference for every available position value in existence, it's about

position: relative;
position: absolute;

Why do you want to assign any position value to an element? Because you don't have much of a choice in the matter. See, position has a set default for when you do not specify the property, so it's specified whether you like it or not. The default is static, which means that every element follows the document flow if not otherwise stated. You can try and move an element by using the top, bottom, left, or right property, whichever - your static element won't budge an inch. That's when you'll want to use absolute and/or relative positioning. By giving position either of these values, you'll be able to move an element and position it.

The main difference between the two is that absolute disregards every other element in your document. It is disconnected from the document flow, so to speak, which comes in handy when you have an element you don't want to interrupt the other elements. Its borders are the top border of your document, the bottom border, the left border, and the right border (there's some more to this, which I'll explain shortly; stay tuned). Careful here, because while your document may be flexible, absolute positioning definitely is not. It will always be in the place you choose, and it won't automatically adapt to any changes you make.

Relative positioning allows for use of the top, bottom, right, and left properties, too, but it is still part of the document flow. Other elements respond to it, and when moving the relative positioned element it will adhere to the element's borders it is part of. For example, if you declare an element display: inline; and position: relative; the object will use the line-height as its indicator.

Now, get this: you can use them together and get some more use out of them. For example, an absolute positioned element will always adhere to the borders of the closest parent element with a position (absolute or relative, respectively). Which means if you define a parent element of a absolute positioned element as relative, the absolute positioned element will be movable inside the borders of the relative, instead of using whichever element container further up has its position defined. That's a whole world of useful - info bubbles, hover container, and I'm sure a lot of stuff I didn't think of yet.

One more thing: You will NEED to define the position property for any element you want to use z-index with (z-index is used for element stacking purposes; an element with a z-index of 20 will always be layered over an element with a lower z-index value. Not getting into that now, just letting you know in case you wondered why z-index doesn't work for you).

Well, okay, not that quick an info fix, but an info fix nonetheless.