Familia de compensación 1-padre compensado

Hablando de la familia offset, podemos analizarla en tres puntos:

compensaciónpadre
offsetTop、offsetIzquierdo
Analicemos offsetWidth y offsetHeight uno por uno:

compensaciónpadre

Primero, echemos un vistazo a la definición oficial:

HTMLElement.offsetParent es un atributo de solo lectura que devuelve un puntero al elemento de posicionamiento más cercano (que se refiere al más cercano en el nivel contenedor) que contiene el elemento o el elemento de cuerpo de tabla, td, th, más cercano. Cuando el estilo.display del elemento se establece en "ninguno", offsetParent devuelve nulo. Si está
un poco confundido después de leer el concepto, analicémoslo paso a paso.

Cuando el elemento en sí no está posicionado

Cuando ni el elemento padre ni el elemento ancestro están posicionados

Cuando el nivel anterior o el ancestro más cercano es td,th, el.offsetParent devuelve td,th
Cuando el nivel anterior o el ancestro más cercano es una tabla, el.offsetParent devuelve la tabla
Cuando el nivel anterior o el ancestro más cercano no está posicionado y no es table, td o th, el.offsetParent devuelve el cuerpo

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <table>
        <thead class="thead">
            <tr class="trone">
                <th class="th">
                    <span class="span"></span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="trtwo">
                <td class="td">
                    <a href="#" class="a">学废了</a>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        console.log(document.querySelector(".span").offsetParent);//th
        console.log(document.querySelector(".th").offsetParent);//table
        console.log(document.querySelector(".trone").offsetParent);//table
        console.log(document.querySelector(".thead").offsetParent);//table
        console.log(document.querySelector(".a").offsetParent);//td
        console.log(document.querySelector(".td").offsetParent);//table
        console.log(document.querySelector(".trtwo").offsetParent);//table
        console.log(document.querySelector(".son").offsetParent);//body
        console.log(document.querySelector(".father").offsetParent);//body
    </script>

Eche un vistazo a los resultados de la impresión.
Insertar descripción de la imagen aquí
Al igual que en la suposición anterior, echemos un vistazo a nuestra situación de posicionamiento.

Cuando el elemento en sí no está posicionado, se coloca el elemento padre o elemento ancestro

Aquí analizamos el caso primero.

<body>
    <div class="grandpa" style="position: relative;">
        <div class="father" style="position: absolute;">
            <div class="son"></div>
        </div>
    </div>
    <div class="grandma" style="position: absolute;">
        <div class="mama">
            <div class="sister"></div>
        </div>
    </div>
    <div class="big" style="position: static;">
        <div class="small"></div>
    </div>
    <div class="more" style="position: fixed;">
        <div class="lit"></div>
    </div>
    <script>
        console.log(document.querySelector(".son").offsetParent); //father
        console.log(document.querySelector(".father").offsetParent); //grandpa
        console.log(document.querySelector(".sister").offsetParent); //grandma
        console.log(document.querySelector(".small").offsetParent); //body
        console.log(document.querySelector(".lit").offsetParent); //more
    </script>
</body>

Descubriremos que mientras el elemento padre esté posicionado, encontrará el elemento dom más cercano al elemento padre posicionado,
pero cabe señalar que, excepto static , aunque el elemento padre pequeño encima de nosotros está posicionado, porque el El elemento posicionado es estático, por lo que todavía apunta al cuerpo.
Otra cosa a tener en cuenta es: cuando es una mesa, es un poco diferente. Ver más abajo.

<table style="position: fixed;">
        <thead class="thead" style="position: fixed;">
            <tr class="trone">
                <th class="th">
                    <span class="span"></span>
                </th>
            </tr>
        </thead>
    </table>
    	 console.log(document.querySelector(".span").offsetParent); //th
        console.log(document.querySelector(".trone").offsetParent); //thead

Uno de los dos resultados de salida es th y el otro es thehead;

Aviso

Encontraremos que el elemento de posicionamiento no estático más cercano del tramo anterior es thead, pero aún se genera.
Pero descubrimos que trone encontró el elemento posicionado no estático más cercano
Preste especial atención cuando sea una tabla e imprima más resultados de confirmación.

Cuando el elemento en sí está colocado

Cuando el elemento padre o elemento ancestro no está posicionado o es estático (no es una tabla), busque el cuerpo (cuando no está fijo)

Cuando se trata de un elemento de tabla hay que prestar especial atención,
en este caso buscar directamente el cuerpo.

Cuando el elemento padre o elemento ancestro tiene un posicionamiento no estático, busque el elemento dom más cercano al elemento padre posicionado (cuando no está fijo)

Cuando el elemento en sí está posicionado y fijo, offsetParent es nulo.

  <div class="big" style="position: absolute;">
        <div class="small" style="position: absolute;"></div>
    </div>
    <div class="more" style="position: fixed;">
        <div class="lit" style="position: static;"></div>
    </div>
    <div class="mama">
        <div class="sister" style="position: absolute;"></div>
    </div>
     <div class="father" style="position: absolute;">
        <div class="son" style="position: fixed;"></div>
    </div>
       console.log(document.querySelector(".sister").offsetParent); //body
        console.log(document.querySelector(".small").offsetParent); //big
        console.log(document.querySelector(".lit").offsetParent); //more
         console.log(document.querySelector(".son").offsetParent);//null

En casos especiales, el offsetParent del cuerpo es nulo.

Insertar descripción de la imagen aquí

Resumir

Este artículo presenta offsetParent. Continuaremos
presentando offsetTop, offsetLeft, offsetWidth y offsetHeight en detalle más adelante. Si tiene alguna pregunta, comente a continuación.