1,
2. HTML code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">3. CSS code
/* CSS style sheet for your captions-2a.html] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [inline * // * body style */body {margin: 0; padding: 0; Background-color: # f0ffff; Font: 62.5% verdana, sans-serif; text-align: center; color: # 4d4d4d;} p {margin: 0; padding: 0 0 1em 0 ;}. captioned_photo {position: absolute;/* sets the positioning type of the DIV block so that the sub-element P contained in it can be located relative to the DIV block rather than the HTML element */width: 240px; margin :. 5em 0. 5em 1.25em; padding: 0; Border: 3px double # 4d4d4d; line-Height: 1em; text-align: Left ;}. captioned_photo P {position: absolute;/* absolute positioning relative to the most recently located ancestor element */bottom: 0; left: 0; width: 100%; margin: 0; padding: 0; Background: URL (images/caption-white.png);/* use a translucent image as the background to achieve transparent cascade effect */font :. 9em verdana, sans-serif; letter-Spacing :. 05em;/* set the space between characters */color: # 0000ff ;}. captioned_photo P span {display: block; padding :. 75em ;}. captioned_photo IMG {margin: 0; padding: 0; display: block ;}4. Explanation of CSS code: Position)
CSS positioning mechanismCSS has three basic Positioning Mechanisms: normal stream, floating, and absolute positioning.
Unless otherwise specified, all frames are located in the normal stream. That is to say, the element position in a normal stream is determined by the element position in (x) HTML.
Block-level boxes are arranged one by one from top to the next. The vertical distance between frames is calculated by the vertical margin of the boxes.
Horizontal layout of the lines in the box. You can use the horizontal padding, border, and margin to adjust their spacing. However, the vertical padding, border, and outer margin do not affect the height of the row's inner frame. The horizontal Box formed by a row is calledLine box)The height of the line box is always enough to accommodate all the lines it contains. However, setting the Row Height can increase the height of the box.
CSS position attributeBy using the position attribute, we can select four different types of positioning, which will affect the way element boxes are generated.
Meaning of the position property value:
Tip:Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream.
CSS relative positioning
Relative positioning is a very easy-to-understand concept. If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point. If you set top to 20pxOriginal location20 pixels under the top. If left is set to 30 pixels, a 30-pixel space is created on the left of the element, that is, the element is moved to the right.
Absolute CSS positioningThe element box set to absolute positioning is completely deleted from the document stream and located relative to its contained block. The contained block may be another element in the document or an initial inclusion block. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.
Absolute positioning makes the element position irrelevant to the Document Stream, so it does not occupy space. This is different from relative positioning. Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream. Relative to the position of the absolute positioning ElementRecently located ancestor ElementIf the element does not have an ancestor element that has been located, its position is relativeInitial inclusion Block.
Conclusion: relative positioning refers to the initial position of the "relative" element in the document, while absolute positioning refers to the "relative" Recent "located ancestor element. If there is no located ancestor element, then, "relative" refers to the initial inclusion block. Depending on the user agent, the initial inclusion block may be a canvas or HTML element.
Implementation Instructions for titles floating above images in this example:The key here is that it is achieved by cleverly setting the position of the text section P relative to the DIV block. The transparent effect is to set a transparent background image for the text section, produce transparent results .. Captioned_photo {
Position: absolute;/* set the positioning type of the DIV block so that the contained sub-element P can be located relative to the DIV block for absolute positioning instead of the HTML element */
...
}
. Captioned_photo P {
Position: absolute;/* absolute positioning relative to the closest located ancestor element, that is, the DIV block */
Bottom: 0;/* defines the offset between the bottom margin boundary of the positioning element and the bottom boundary of the contained block. */
Left: 0;/* defines the offset between the left margin boundary of the positioning element and the left boundary of the contained block. */
...
}
After this setting, the title section is placed on the top layer of the image and aligned closely with the left bottom boundary.
Reference: The Art & Science of CSS
W3C School: http://www.w3school.com.cn/css/css_positioning.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
