Week 6: More CSS Layout
The sections in this reading on position,
z-index, and overflow
draw heavily from a page by
David Humphrey.
Recommended Readings
Flexbox Layout
I have not written any material on flexible box layout (flexbox) in CSS, but we need to learn more about it than we saw in class Thursday.
MDN's tutorial material on flexbox is quite good. Read its chapter Flexbox Layout up to and including the section Columns or rows?
If you'd like to see another example, read Typical Use Cases of Flexbox, which applies flexbox to solve a few common layout problems.
Using the position Property to Place Items in Precise Locations
Many desires require more sophisticated element positioning than simply allowing everything to flow. Sometimes we desire precise control over where elements appear on the page, and how the page reacts to scrolling or movement.
To accomplish this kind of
positioning,
we can use the CSS
position property
to override the defaults provided by the browser. Its possible
values include:
-
static: the default, where elements are positioned according to the normal flow of the document -
relative: elements are positioned according to the normal flow, but with extra offsets (top, bottom, left, right), allowing elements to overlap -
absolute: elements are positioned separate from normal flow, in their own "layer" relative to their ancestor element, and don't affect other elements. This is useful for things like popup windows and dialog boxes. -
fixed: elements are positioned separate from normal flow, relative to the viewport. -
sticky: a hybrid ofrelativeandfixedthat allows an element to be positioned relatively, but then "stick" when scrolling or resizing the viewport. This is often used for headings, which can be scrolled up, but then stay in place as you continue down into the document.
Using the z-index Property to Position Elements on Top of Other Elements
In addition to controlling how elements are positioned in the
two-dimensional x-y plane of the screen, we can also
stack elements on top of each other in different
layers. We achieve this through use of the
z-index property.
The z-index is an integer, positive or negative,
that indicates the level at which the element should be placed
in a stack between the screen and the user. The default stack
level is 0, so using a positive
z-index will place an element on top of anything
not given a z-index.
The z-index is often used together with
position to place elements in arbitrary positions
on top of other elements. For example, YouTube uses this
combination to show a video's running time in the lower
righthand corner of the thumbnail image shown in its search
results.
Using the overflow Property to Layout of Content Bigger Than its Container
When the contents of an element are too large to be displayed in
the space available, we have options for how the browser will
display the extra content. To do this, we work with the
overflow property.
It lets us control the overflow-x and
overflow-y properties of the element in a single
declarations. Possible values of the property include:
-
visible: This the default. The browser does not provide scroll bars, and content is not clipped. -
scroll: The browser always provides scroll bars. The content is clipped and will scroll if necessary. -
auto: The browser provides scroll bars only when necessary. The content is clipped and will scroll if necessary. -
hidden: The content is clipped. The browser does not provide scroll bars.