Ver Mensaje Individual
  #2 (permalink)  
Antiguo 14/07/2011, 09:03
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: Estructuras con divs flotantes y posición

Cita:
Iniciado por d3xf4ult Ver Mensaje
1º) Quería saber como influyen las herencias de los div id o div class sobre otros divs id o div class, así como los span class.
Que uses class o id no influye en la cascada de estilos, son dos formas distintas de acceder a un elemento, solo eso.

Lo que si debemos tener en cuenta es con que tipo de caja trabajamos: las hay de linea, de bloque y inline-block.

por ejemplo: div es de bloque y span es de linea.
Entonces esto es correcto: <div><span></span></div>
Pero anidar un elemento de bloque dentro de un elemento de línea no es correcto y no pasará el w3c validator: <span><div></div></span>

Aunque en cualquier caso puedes convertir un elemento de linea a bloque o viceversa usando la propiedad display.

Ejemplo:
display:inline; //convierte una caja en caja de linea
display:block; //convierte una caja en caja de bloque

La propiedad inline-block es un tanto más avanzada, acá la explican.

Cita:
Iniciado por d3xf4ult Ver Mensaje
Y lo que pasa, es que los divs "dos" y "tres", al incorporar texto o demás. se superponen encima del div "cuatro".
debes trabajarla con la propiedad z-index. La cual implica dos cuestiones:
  1. que estructures correctamente el html con un contenedor y elementos hermanos en su interior.
  2. que posiciones correctamente las capas que intervienen en el apilamiento.
Acá un artículo.

Cita:
Iniciado por d3xf4ult Ver Mensaje
Por eso pregunto las razones de las propiedades float y position que creo que influen en todo esto y también las herencias de divs padres e hijos
Lo correcto es trabajar con contenedores e hijos flotados. Ya que el contenedor te servirá para limpiar el flotado. Es decir, para que no te ocurra de que se te apilen las cajas misteriosamente, ya que este contenedor tomará la altura de su hijo flotado más alto. Aquí un ejemplo funcionando.

Finalmente, float hace que la capa salga del flujo normal del documento, al igual que cuando usas position absolute o fixed. Por esto es que debes usar un contenedor para las cajas flotadas. Y por esto también es que debes usar un contenedor para las cajas posicionadas en absoluto, ya que estas buscarán su ancestro inmediato relativo o body para posicionarse.Sobre este tema te podes documentar acá.

Espero esta info te sea útil.

Saludos.