En CSS, puede utilizar el atributo de posición para lograr el posicionamiento relativo del elemento secundario en relación con el elemento principal estableciendo el estilo de posicionamiento relativo "posición: relativa;" para el elemento principal y el posicionamiento absoluto "posición: absoluto;" estilo para el elemento hijo.
El entorno operativo de este tutorial: sistema windows7, versión css2, este método es adecuado para todas las computadoras de la marca.
Recomendaciones relacionadas: "Curso de programación en vídeo" Cómo
realizar el posicionamiento del elemento secundario en relación con el elemento principal en CSS
Configuración de estilo del elemento principal:
1
posición: relativa;
estilo del elemento secundario:
1
posición: absoluta;
código de muestra:
estructura html
1
2
3
css
1
2
3
4
5
6
7
8
9
10
11
# div1 { ancho: 500 px; alto: 500 px; color de fondo : gris oscuro; posición: relativo; } # div2 { ancho: 30 px; alto: 30 px; color de fondo: rojo ; posición: absoluta; derecha: 20px; } Principio del efecto El navegador renderiza html, se dice que hay un flujo de documentos, los elementos a nivel de bloque se renderizan en línea y los elementos en línea se renderizan en línea, aquí, dos divs son bloque -elementos de nivel, uno padre, un hijo, el resultado de la representación normal es que el elemento padre está en la esquina superior izquierda del navegador y el elemento hijo está en la esquina superior izquierda del elemento padre. Si queremos posicionar el elemento hijo en relación con el elemento padre, debemos usar el atributo de posición. Valor de atributo de posición Valor de atributo descripción absoluto Genera elementos absolutamente posicionados, que se posicionan en relación con el primer elemento padre distinto del posicionamiento estático. relativo genera un elemento relativamente posicionado, que se posiciona en relación con su posición normal.
Sabemos que si desea utilizar el posicionamiento relativo al elemento padre, debe utilizar el absoluto. ¿Por qué no funciona el uso absoluto directamente? Debido a que el valor absoluto se coloca en relación con el elemento principal, existe un requisito para el elemento principal, es decir, la posición del elemento principal no puede ser estática. Si la posición del elemento principal es estática, continúe buscando el elemento, saber si encontrar el elemento cuya posición no es estática. Este elemento está posicionado relativamente, por lo que la posición del elemento principal debe establecerse en relativa. Esto no tiene ningún efecto, porque relativo solo se posiciona en relación con la posición normal. La posición normal position es la llamada posición de salida predeterminada del flujo de documentos Si establecemos la posición en relativa sin establecer el desplazamiento x, y es equivalente a la posición del elemento principal sin cambios.
