This link has been bookmarked by 156 people . It was first bookmarked on 06 May 2008, by gabriele Domenichini.
-
27 Sep 11
-
16 Dec 10
-
11 Dec 10
-
29 Apr 10
-
28 Jan 10
-
27 Jan 10
-
26 Jan 10
-
25 Jan 10
-
19 Jan 10
-
20 Aug 09
-
07 Aug 09
-
22 Jul 09
-
25 Jun 09
-
15 May 09
-
14 Mar 09
-
11 Mar 09
-
03 Jan 09
-
Display:block;
Block can be, quite literally, seen as a block. It has a specified width and height, optionally controlled by its content, but dimensions set by CSS have prevalence
-
Elements with
display:inlinealways take their width and height from the contents, and will ignore any dimensions specified in the CSS.
-
-
30 Dec 08
-
two types of ways to display an element in CSS: block and inline
-
It has a specified width and height, optionally controlled by its content, but dimensions set by CSS have prevalence.
-
they do not allow elements on the same “line” as their own.
-
The next element will always be placed under it.
-
Elements with
display:inlinealways take their width and height from the contents, and will ignore any dimensions specified in the CSS. -
so they will always be next to the preceding element, providing that the preceding element is inline as well and that there is enough width left.
-
If the width of the “line” is filled, an element with display:inline will wrap to the next line.
-
The flow in CSS is the logical way in which elements get placed on your screen.
-
That order is the flow, and dictates which element gets rendered and placed where.
-
This is partially because the display differs to wildly in different browsers
-
Positioning also differs when you use the display property with it. The way positioning and display interact is a bit tricky:
position:staticandposition:relativecan be bothdisplay:blockanddisplay:inline, whileposition:absoluteandposition:fixed(and floats, more on that in the next article) will always be displayed as block elements. -
An element with position:static fills the space its contents need. whether that is
display:blockordisplay:inlinedepends on the element’s standard display (for example, a<div>hasdisplay:block, while a<span>hasdisplay:inline) or on what you specify in your CSS. -
one vital difference
-
The properties top, right, bottom and left allow you to shift it away from that space
-
The offset here are the borders of the designated space
-
The elements next to it in flow use the designated space as the “real” place of the element.
-
The biggest difference is that an absolutely positioned element gets taken out of the flow. This means that it doesn’t interact with other elements around it. The elements around it pretend that the element just simply doesn’t exist.
-
The control the offset from the first parent element that is positioned relatively or absolutely.
-
Unless you have elements in your CSS with
position:relative,position:fixedorposition:absolute, this is the root element, which is<html>. -
It doesn’t take its offset from a parent element, but always from the viewport, your browser window.
-
This essentially means that, when you scroll, the element stays visible and doesn’t move with the rest of the page.
-
This property allows you control which absolutely, fixed or relatively positioned element is placed on top
-
Z-index on any element without
position:absolute,position:fixedorposition:relativedoes nothing. -
This is called “Stacking”, and a number of elements stacked on top of each other is called a “stacking context”.
-
Worth noting though, is that every time you declare a Z-index, you create a new “stacking context”. This essentially means that any element within the current element will use the parent’s Z-index as a starting point.
-
-
01 Dec 08
-
14 Oct 08
-
01 Oct 08
-
24 Sep 08
-
14 Aug 08
-
08 Aug 08
-
13 Jun 08
-
12 Jun 08
-
11 Jun 08
-
-
09 Jun 08
-
07 Jun 08
-
06 Jun 08
-
29 May 08
Tim HoeckWithout a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a
-
23 May 08
-
22 May 08
-
21 May 08
-
-
20 May 08
-
19 May 08
-
Glacial SpainWithout a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a
-
17 May 08
-
16 May 08
Susan Nugentarticle explains in detail about how to use CSS for positioning content on a web page.
-
15 May 08
-
14 May 08
-
13 May 08
-
David Dugay1st of a 2-part tutorial on CSS positioning. easy-to-understand examples, diagrams, good for somebody who wants to figure out how CSS positioning works
-
12 May 08
-
11 May 08
-
10 May 08
-
08 May 08
-
-
07 May 08
-
06 May 08
-
lucidquestWithout a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a
-
-
Peter Shanksal about CSS positioning, plus properties that define layout such as display and float, and a preview of the new CSS3 layout modules.
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.