Fixed positioning overlaps with the outer margin, and fixed positioning overlaps

Fixed positioning overlaps with the outer margin, and fixed positioning overlaps

I have never carefully understood the Fixed position of Fixed. the overlap between the outer margin and the Fixed position will also be related. The overlap will directly affect the position of the Body!

 

I used to know that fixed positioning is relative to the browser's view. After listening, I understood it. The fixed positioning element is located in the browser's view only after the offset is set.

 

1. when fixed is set for the top selector, no offset is set for the top layer (which is out of the standard Document Stream) and is located at its parent package layer, (when the offset is set for the fixed position of the top selector, the position of the top layer is located according to the offset ), the margin value of the parent package layer body overlaps with that of the mainbody (the body and the mainbody belong to the standard Document Stream). The margin value on the mainbody is greater than the margin value of the body, the upper margin value of mainbody is 20 PX (when the upper and lower margin overlaps in the standard Document Stream, the larger margin value is selected), so the body is moved down to 20 PX. The top layer is located at the body layer, as a result, the distance between the top layer and the Visual Window of the browser is generated. To keep the top layer close to the browser window, you need to set the offset top: 0 for the fixed positioning of the top layer;

2. The first step is to set the offset for the top layer, and the sibling element following the top layer will occupy its original position. Therefore, the mainbody layer is moved up to occupy the position of the original top layer. As a result, the distance between the top layer and the mainbody layer is no longer 20 PX. You can solve this problem by adding a certain height to the upper and outer padding of the mainbody layer.

 

Http://www.imooc.com/qadetail/66633

 

In the vertical direction, the margin-top value overlaps-that is, the outer margin is merged: When two vertical outer margins meet, the outer margin is merged, the height of the merged outer margin is equal to the large outer margin values in the two outer margins. This occurs only in the block-level box in the normal document stream, but does not appear in the line box, absolute positioning, or floating. Therefore, we recommend that you add margin to the parent element and use padding in the child element.

 

On the margin, sometimes I have to listen to my son. Haha

Http://www.imooc.com/qadetail/66633