Frontend programming improvement journey (12) ---- position placement value application, ---- position placement

Frontend programming improvement journey (12) ---- position placement value application, ---- position placement

The masks Used in this push project and the buttons at the bottom of the page all involve the concept of position placement. As follows:

The position attribute of an element is not the default value static. Therefore, this element is called a positioning element. The positioning element generates a positioning box based on four features (placement value): 'top', 'right', 'bottom ', and 'left '.

The question now is what is the role of a placement value when it is declared or not.

I. Declarative placement

The reference object of its placement value is the ancestor element that recently declared "position" as "absolute \ relative \ fixed. This is a common situation.

The following is an example:

<div style=" width:500px; height:500px; background:#000; margin-left:200px;"><div style="position:absolute; left:200px; margin-left:100px; background:#F00; width:50px; height:50px;"></div></div>

When the placement value is set to 0, the internal div position is as follows:

In this case, the conclusion is correct when the above placement value is verified. The internal div reference object is the body element.

Ii. Placement value not declared

If the absolute positioning element does not declare the placement value, it only declares position: absolute. Its own positioning and the reference object of margin are its latest block level, cell (table cell) or the content box of the inline-block ancestor element.

In the above example, the placement value is canceled to check the effect.

No placement value is set. The reference object of the internal div is the upper div, that is, the first block-level element.

Through the above two examples, we know that there is a difference between the placement value and the placement value without setting, the difference is that when the placement value is not set, the browser will default the placement value to auto.

Iii. Placement value application

From the above placement values, we can see that each placement value locates the element relative to the distance of the reference object. So there is a very interesting situation. Ledi sets a rule to remove the width and height of the inner div and set the Four Placement values to 0. According to the above theory, the div will fill the whole body with reference to the body.

For example:

The above features are often used to set the mask. Of course, the color of the mask layer cannot be so colorful at this time. For example, the masking code used in this project:

.search-area-container {            display:block;            position:absolute;            left:0;            right:0;            top:0;            bottom:0;            background-color:transparent;            z-index:1100;        }

The color is transparent. As follows:

Code extending from the menu bar to the bottom:

/* Set to hide the menu bar by default and extend it down to the bottom */# search-area {position: fixed; left:-60%; top: 43px; bottom: 0; width: 60%; z-index: 1111; color: # fff; background-color: #418cd5; text-shadow: none; border-radius: 0 ;}

The button bar at the bottom of the job details page contains three code directions:

/* Extend to left and right, set the content to center, and add some shadow effects */. btn-wrap {position: fixed; bottom: 0; left: 0; right: 0; text-align: center; background-color: # f0f0f0; box-shadow: 0-1px 2px # aaa ;}