Let's talk about my experience in deploying div in front-end web design.

In technical terms, absolute positioning allows an element to be accurately located anywhere on the page relative to the element's inclusion block. Or, in general, it allows "sub" elements (such as p id = "copyright-date") relative to the "parent" element (for example, div id = "footer "). Although other values (static, relative, and fixed) can be defined for the position attribute, we will only talk about absolute positioning.

Let's assume that a group of div, p, and strong elements are written. Each element is located relative to the element above the mark stream. This is like a Tetris game. Each block must be placed on the top or side of an existing adjacent block (because each element has its own default position, the premise is that you do not set the position ).

On the contrary, when absolute positioning is used, each element of the same group defines an absolute position relative to the contained block (parent element), without the need to mark the stream. Child elements can be placed side by side, overlapped, or even located anywhere outside the block (parent element. Fixed positioning attributes include top, left, bottom, right, and z-index. Why? I don't know what the location attribute is? Next we will start to talk about:

Before discussing the location attribute, you must first understand the difference between the position attribute relative and absolute. The relative attribute is relative to and is usually used to contain blocks (that is, parent elements, absolute is usually used for elements in a block that have applied the relative attribute. It's easy to understand!

Top, left, bottom, right, and so on are all location elements. The Chinese meaning of these elements can be understood. These attributes are usually measured in px, em, % calculates a combination of these attribute values relative to the contained block (that is, the parent element. Therefore, if the position of the child element is bottom: 50px; and left: 30px, the child element is located at the bottom of the parent element 50 pixels, 30 pixels away from the left. In addition, different units can be used together, such as bottom: 50px and 3em.

Well, let's take these theories into practice. The following is the sample code:

1 h2
2 {
3 position: relative;/* defines the attribute relative for the contained block (that is, the parent element */
4 width: 100%;/* defines the width of the included block as 100% */
5 height: 100em;/* define the height of 100 characters */
6}
7
8 h2 strong
9 {
10 position: absolute;/* The position is set to the attribute absolute */
11 top: 20px;/* The display distance is 20 pixels from the top */
12 left: 10px;/* This shows 10 pixels to the left */
13}
In this way, a simple absolute positioning model is initially formed, and the complicated positioning is also the principle. The html code is as follows:

1 2 <strong> I'm proud to laugh. It's hanging in the air. </strong>
3 You cannot see the expected effect. Refer to the solution in "bug in css and solution (2)" I wrote earlier to set the border and background color to see the effect!

(Like to learn and want to discuss knowledge with me leave your mailbox or contact information, or send an email with me, 747850255@qq.om. for reprinting, please attach the reprinted address, from the blog "luer web ")