duduromeroa.com

Breve estudio de posicionamiento con CSS [Marz. 23-2023]

Ir a estudio de propiedad CSS Grid Ir a estudio de propiedad CSS Flex-Box

Elementos 'block'

Características:

Elementos block en HTML:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <h1-h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <footer> <ul> <video>

Posicionando elementos 'block'

En este ejemplo los 3 elementos bloque se colocan uno encima de otro:

Elemento h1

Elemento h2

Elemento h3


Abajo, elementos block, aún sin propiedades de posicionamiento insertadas en los elementos; aunque sí con dimensiones (width: 100px; height: 100px;). De haber más elementos estos se colocarán uno encima de otro, de arriba hacia abajo.


A esos mismos elementos block podemos alterar su estado con 'display: inline-block' para que se comporten como elementos en línea, sin perder su estado de 'colisión' con otro elemento block (al estirar el ancho del navegador estos elementos se re-adaptarán en su esquema):


Así mismo se puede alterar el ancho y las esquinas (con 'border-radius:..;) de algunos elementos para que sigan comportándose como bloques, pero alineados horizontalmente y adaptables al ancho del navegador:


En otro nuevo ejemplo también se alteró en cada elemento su propiedad bloque ' display: inline;'. Si el ancho del navegador se reduce, entonces los elementos se readaptarán para ocupar los espacios sobrantes.

Elemento h1

Elemento h2

Elemento h3

Elemento h1

Elemento h2

Elemento h3


Por otro lado, es buena práctica que el elemento block sea el padre del elemento inline. Ojo: las propiedades 'margin-block-end/start' en los elementos hijos eliminaron los márgenes que por default presenta cada elemento block.

Elemento block article

Elemento h2

Elemento p


Luego, podemos alterar la propiedad 'block' de los elementos hijo por la propiedad 'inline' para que los elemenos se muestren uno al lado de otro:

Elemento block article

Elemento h2

Elemento p

Elemento p

Elemento p

Elemento p


Abajo. ya que ambos elementos tienen etiquetas diferentes en sus contenidos (uno es 'h1' y el otro 'p'), los bloques hijo con 'display: inline-block;' no están alineados horizontalmente. También, ambos elementos hijo contiene el margen natural de un elemento block. Recordar algo: el porcentaje de la propiedad 'width' en ambos elementos es la que me permite tener dos elementos por fila. Si reduzco ese porcentaje, más elementos podrán ingresar a la fila.

Elemento h2

Elemento p

Elemento p

Elemento p

Elemento p


Abajo, ahora todos los elementos hijo tienen la misma etiqueta ('p'), se les alteró su comportamiento (de block a inline-block), se eliminó su margen natural y se alteró el ancho del % para que más elementos sean insertados por fila (cada elemento usará solo el 24% de todo el ancho disponible).

Elemento p

Elemento p

Elemento p

Elemento p

Elemento p

Elemento p

Elemento p

Elemento p


Por otro lado, la anidación de elementos bloque es interesante. Abajo están tres elementos anidados (insertados uno en otro) desde el elemento con tag main. Todos aún sin estilo en posicionamiento.

Elemento main
Article

h2

p


Ahora, con estilos en posicionamiento y dimensión pero sin eliminar los márgenes:

Canta: Julio Jaramillo...

"Tu eres perla que surgiste del mas grande e ignoto mar, y si al son de su arrullar en jardin te convertiste"


Elementos 'inline'

Características:

Elementos inline en HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Abajo, dos elementos inline anidados. Aunque cada elemento inline se escriba separado del otro (o con un salto de línea) el texto se mostrará uno al lado de otro, de izquierda a derecha.

Gringa loca gringa loca, eres tu la que se quiso casar

Ahora, los mismos elementos pero con propiedades de color, tamaño y altura de interlineado con la propiedad 'line-height: ...;'

Gringa loca gringa loca, eres tu la que se quiso casar

PROPIEDADES DE POSICIONAMIENTO

La propiedad 'position:...;' acepta los siguientes valores de posicionamiento en CSS es:

Otras propiedades de posicionamiento son:


VALOR : ...relative;

La propiedad 'position:...;' acepta los siguientes valores de posicionamiento en CSS es:

Abajo, los cuadros amarillo y gris (block) tienen 'position: relative;' con 'left: 50%;':

En otro ejemplo, los cuadros amarillo y gris no estan dentro de un contenedor. Tienen 'position: relative;' con 'left:..;' en valores absolutos (pixeles) lo que evita que se readapten si la ventana del navegador se altera en el ancho.


Ahora los elementos están dentro de un contenedor; el recuadro amarillo con posición relativa se excede de los límites de su contenedor con 'left: 80%;'; pero el recuadro gris se mantiene en su posición con 'left: 50px;' y 'top: 50px;'. En otras palabras, los valores absolutos (como la unidad en pixeles) dan ubicación fija; mientras que los valores relativos (como los %) dan ubicación fluída según dimensiones de contenedor (o del las dimensiones de la ventana del navegador).




En otro ejemplo, solo los bloques inferiores (gris y verde) tiene activada la propiedad 'position: relative;'; pues es la única forma de darle un distanciamiento de 'top: 50px;' para ubicarlos en la actual posición. En otras palabras, la posición relativa activa también los valores top | bottom | left | right: [valor];

centro
izq
der
izq
centro
der

Sin embargo, ya que muchos de los elementos podrían contener otros elementos como texto o imágenes, vale tener en cuenta ese aspecto: únicamente la propiedad 'height: auto;' permite que el contenedor respete la cantidad de contenido, sin ocultarlo; expandiendo la altura del contenedor a lo necesario. Sin 'height: auto;' el contenido del elemento contenedor no se mostraría y el área tampoco se expandería. Finalmente, la propiedad 'padding: 15px;' únicamente en el elemento contenedor del texto '<p>' permite ajustar espacios entre contenedor padre y contenido hijo. Nota también que la separación de altura entre las dos últimas cajas (amarilla y verde) se sigue respetando gracias 'position: relative;' y 'top: 50px;' activado únicamente en esos dos elementos.

Guayaquil, oficialmente Santiago de Guayaquil, es la ciudad capital de la Provincia del Guayas y cabecera del cantón homónimo. Es la segunda ciudad más poblada del Ecuador, con una población de 2.7 millones de habitantes, y la segunda área urbana más poblada del país.

Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer,

Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...

Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...

Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...

Si a tus rubias y morenas, que enloquecen de pasion les palpita el corazon que mitiga negras penas con sus ojos verdes mares o de negro anochecer...





VALOR : ...absolute;

Se debe tener en cuenta que un elemento block con 'position: absolute;' y 'top: 0px;' se ubicará en la posición vértice (0,0) de su contenedor (esquina superior izquierda de su más inmediato elemento padre). Por ejemplo, el resultado del código inferior es la barra verde (un elemento en posición absoluta) ubicado al inicio de está página, pues es esta página su contenedor inmediato

<!-- HTML -->
<div class="eleAbso1"> </div>

/* CSS */
<style>
.eleAbso1 {
   width: 100%;
   height: 21px;
   position: absolute;
   top: 0px;
   background-color: yellowgreen;
}
</style>

Debido a eso es necesario anidar el elemento de posición absoluta dentro de un contenedor padre en posición relativa. En otras palabras, si deseamos que un hijo absolute no salga disparado de los límites de un contenedor padre, entonces hagamos de ese padre 'position: relative;' y del hijo 'position: absolute;':

Soy hijo absolute dentro de un padre relative y no me escapo de estos límites. Sin un padre relative mi ubicación sería al límite de mi padre más inmediato: la ventana de tu browser.

¿Y si se añade otro elemento? Si se añade otro elemento posicionado absoluto simplemente no será mostrado; no por inexistente, sino porque este último elemento se ubicará encima del elemento absoluto anterior (se agregó una sombra para hacerlo más notorio). Para que este último elemento añadido sea mostrado, será necesario darle valores de ubicación 'left' y 'top':

Yo estoy primero en el código, soy absoluto con 'top: 0px;'

Yo llegué después, soy absoluto con 'top: 27px;'


Hasta aquí debemos recordar algunas de las propiedades de 'relative;' y 'absolute':

Así, un elemento absoluto es un estudiante obediente que únicamente se ubicará en la silla que le hemos asignado. No se moverá a menos que le sea avisado. Mientras que la posición relativa es un estudiante rebelde pero ordenado: se ubicará en la silla que le asignemos pero se ajustará si hay otros estudiantes muy cerca.

Aún así, hay que tener cuidado con la convivencia entre un elemento relativo y uno absoluto. En el ejemplo de abajo, un contenedor relativo agrupa dos elementos hijo (amarillo absoluto - gris relativo, en ese orden); ambos con los valores 'width: auto;' y 'height: 60px;'. Allí:

pos. relativa

pos. absoluta

Sin embargo y en el ejemplo de abajo: solo al intercambiar el orden de ambos elementos (en el código) da otros resultados diferentes: El elemento absoluto al no tener valores de ubicación (der., izq., arriba o abajo) se ubicará en la posición (0,0) de su contenedor, solapándose debajo del elemento relativo. Y aunque agreguemos más elementos absolutos, (cajas amarillas) todos seguirán solapándose debajo del elemento relativo hasta que le demos a las cajas amarillas algún valor de posición.

pos. absoluta

pos. relativa (amarillo absoluto está abajo de mi)

En otras palabras, debemos estar atentos en la ubicación del código de los elementos ubicados en absoluto o relativo, y hacer ajustes de posición y ordenamiento según necesidades de diseño y contenido. En el siguiente código el texto tendrá un estilo de color verde.


Sobreescribir estilos CSS en un mismo elemento HTML con un selector ID y con un selector CLASS

Un mismo elemento HTML podría contener dos tipos de selectores. Un selector id y otro selector class. Pero los estilos de un solo selector tendrán mayor peso sobre otro.

En el siguiente código: el texto del elemento div se mostrará en color verde porque, a pesar de contener dos selectores, el ID #verde tiene mayor peso o influencia sobre los elementos HTML:

/* HTML. Elemento con dos selectores (un ID y un CLASS) */
<div id="verde" class="rojo"> texto </div> 
/* CSS. Ambos selectores estan declarados con un solo estilo */
div{
font-family: arial;
font-size: 30px;
}

// Es regla que el selector ID tiene más peso
// Por lo tanto, el texto se mostrará en color verde
#verde{color: green;}
.rojo{color: red;}

// Finalmente, el texto será mostrado en color verde 

Sin embargo, a veces será necesario indicar desde otra página HTML que sobreescriba uno de los dos estilos CSS sobre otro estilo (y en un mismo elemento). Eso puede probarse creando una copia de la página con los estilos iniciales. Recordemos que un estilo ID no puede estar más de una vez en una misma página.

/* NUEVA REGLA CSS */
/* Indicamos que el estilo del primer selector 
(de izquerda a derecha) tenga mayor peso que el selector ID */
#verde.rojo{color: red;}

Ahora, el texto del elemento <div> que contiene los selectores id="verde" class="rojo" tendrá color rojo.

¿Por qué? En CSS y mediante la sintaxis #SelectorID.selectorCLASS {...} pedimos que se sobreescriba los estilos del selector class sobre los estilos selector id.

---

Atención con la separación de los selectores en CSS en los ejemplos anteriores. Una separación entre selectores significa que alteramos un descediente de un elemento padre:

// SEPARADO
/* CSS. A partir de un elemento padre, 
alterar solo el elemento descendiente */
#padre .hijo{
color: red;
}

// UNIDO
/* CSS. Agregar el estilo al selector .bb que le 
antecede al selector #aa */
#aa.bb{
color: red;
}