Some front-end basics (html, css) encountered in practice

1.

The div css mouse hand shape is cursor:pointer;

2.

HTML relative and absolute layout note: absolute says that when the position attribute is set to absolute, it is always positioned according to the browser window, which is actually wrong.

When the position of sub1 is set to absolute, who is the object for offset? There are two situations here:

(1) When the parent object (or great-grandfather, as long as it is a parent object) of sub1 also sets the position attribute, and the position attribute value is absolute or relative, that is, it is not the default value, then sub1 is positioned according to this parent.

Note that although the object has been determined, there are some details that require your attention, that is, which anchor point of the parent should we use for positioning? If parent sets properties such as margin, border, padding, etc., then this anchor point will ignore padding and will be positioned from the beginning of padding (that is, only from the upper left corner of padding). This is different from the idea that we would take it for granted that the positioning will start from the upper left end of margin.
The next question is, where is the location of sub2? Because when position is set to absolute, sub1 will overflow the normal document flow, just like it does not belong to the parent, it floats up. In DreamWeaver, it is called a "layer", which actually means the same thing. At this point, sub2 will obtain the position of sub1, and its document flow is no longer based on sub1, but starts directly from parent.

(2) If sub1 does not have a parent object with a position attribute, then the body will be used as the positioning object and the positioning will be performed according to the browser window. This is relatively easy to understand.

3.

CSS transparency filter:alpha(opacity=0);opacity:0;-moz-opacity:0; Only when these three CSS are added together can it be compatible with all browsers

4. Window Relationships and Frames

The top object always points to the highest (outermost) frame, which is the browser window. Use this to properly access any frame. Because for code written in a framework, the window object always points to a specific instance of that framework, not the top-level framework. For example, in a child frame, window refers to its own object. If you want to change the src of this frame and the src of the parent window's iframe or frame, you can't use window. In this case, you need to use window.top.$(selector) to access it.

<<: CSS3 realizes the animation effect of lotus blooming

>>: HTML basics - CSS style sheets, style attributes, format and layout details