Display and positioning Flashcards
The default position of an element can be changed by setting its position property.
The position property can take one of five values. . . . .
position:
static - the default value (it does not need to be specified)
relative
absolute
fixed
sticky
Position: relative;
by accompanying the position declaration with one or more of the following offset properties that will move the element away from its default static position:
You can specify values in pixels, ems, or percentages etc
This value allows you to position an element relative to its default static position on the web page.
top - moves the element down from the top.
bottom - moves the element up from the bottom.
left - moves the element away from the left side (to the right).
right - moves the element away from the right side (to the left).
Position: absolute
When an element’s position is set to absolute, all other elements on the page will ignore the element and act like it is not present on the page.
Position: fixed;
This technique is often used for navigation bars on a web page.
When an element’s position is set to absolute, as in the last exercise, the element will scroll with the rest of the document when a user scrolls.
We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed, and accompanying it with the familiar offset properties top, bottom, left, and right.
Position: sticky;
e.g.
.box-bottom {
background-color: darkgreen;
position: sticky;
top: 240px;
}
In the example above, the .box-bottom <div> will remain in its relative position, and scroll as usual. When it reaches 240 pixels from the top, it will stick to that position until it reaches the bottom of its parent container where it will “unstick” and rejoin the flow of the document.
The sticky value is another position value that keeps an element in the document flow as the user scrolls, but sticks to a specified position as the page is scrolled further.
This is done by using the sticky value along with the familiar offset properties, as well as one new one.
When boxes on a web page have a combination of different positions, the boxes (and therefore, their content) can overlap with each other, making the content difficult to read or consume.
e.g. z-index: 3;
z-index does not work on static elements ( default positioning)
default value of z-index is 0 so if something has a z-index of one then it will move the element forwards if it was originally overlapping
The z-index property controls how far back or how far forward an element should appear on the web page when elements overlap. This can be thought of as the depth of elements, with deeper elements appearing behind shallower elements.
The z-index property accepts integer values. Depending on their values, the integers instruct the browser on the order in which elements should be layered on the web page.
Three values for the display property are. .
inline, block, and inline-block
The default display for some elements, such as <em>, <strong>, and <a>, is called inline.</a></strong></em>
Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content and not requiring a new line after each element.
Inline elements cannot be altered in size with the height or width CSS properties.
The CSS display property provides the ability to make any element an inline element. This includes elements that are not inline by default such as paragraphs, divs, and headings.
Display: block;
Some elements are not displayed in the same line as the content around them. These are called block-level elements.
These elements fill the entire width of the page by default, but their width property can also be set. Unless otherwise specified, they are the height necessary to accommodate their content.
Elements that are block-level by default include all levels of heading elements (<h1> through <h6>), <p>, <div> and <footer>
The third value for the display property is inline-block.
Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other
And we can specify their dimensions using the width and height properties. Images are the best example of default inline-block elements.
The float property is commonly used for wrapping text around an image.
Note, however, that moving elements left or right for layout purposes is better suited for tools like CSS grid and flexbox, which you’ll learn about later on.
The float property is often set using one of the values below:
left - moves, or floats, elements as far left as possible.
right - moves elements as far right as possible.
Floated elements must have a width specified, as in the example above. Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.
The float property can also be used to float multiple elements at once. However, when multiple floated elements have different heights, it can affect their layout on the page.
Specifically, elements can “bump” into each other and not allow other elements to properly move to the left or right.
e.g. clear: right
The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values:
left—the left side of the element will not touch any other element within the same containing element.
right—the right side of the element will not touch any other element within the same containing element.
both—neither side of the element will touch any other element within the same containing element.
none—the element can touch either side.
