What CSS properties affect the positioning of a div or other element on the page? Why...

What CSS properties affect the positioning of a div or other element on the page? Why would a designer want to control this?

Solutions

Expert Solution

Now that you are picturing every single page element as a block of pixels, we can talk about how positioning is used to get the blocks of pixels exactly where you want them to go. We're going to leave off any discussion of the box model, but that factors into this as well...

Static:

. This is the default for every single page element. Different elements don't have different default values for positioning, they all start out as static. Static doesn't mean much; it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static; is to forcefully remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.
Relative:

This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be

Absolute:

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left, bottom. and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.

The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

Fixed:

. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school "frames" days.

keosha answered 1 year ago

Next > < Previous

Question

What CSS properties affect the positioning of a div or other element on the page? Why...

Solutions

Expert Solution

Related Solutions

what is the static, relative, and absolute positioning in CSS?

What is an element that shares group properties with Mg? What properties are common in this...

What is the difference between HTML attributes and CSS properties? What are depricted elements and how...

Identify one element that shares Knight's move properties with Mg? what properties would be similar? What...

Explain why fluorine is the most electronegative element than other elements?

What are the different type of defects that affect the mechanical properties in polymers?

Why are physical properties important for bioplastics and what are they

3. Every HTML element has innerHTML and outerHTML properties. What is the difference between the two?...

Hydrogen with 1s^2 would be similar to what other elements? Is this element paramagnetic?

What is the difference between a search landing page and a doorway page? Why might an...