CSS - imagen con posición absoluta en header

   
Vista:

imagen con posición absoluta en header

Publicado por ellie (4 intervenciones) el 22/02/2016 16:25:08
Buenas tardes,
Tengo Wordpress y uso Polylang, y necesito colocar las banderas de idioma en la cabecera arriba a la derecha, pero por alguna razón no hace caso al comando "absolute" y se muestran mal, alguien sabe por qué puede ser?

Adjunto captura de cómo se ve, y el código que uso es:

#header-top { position: absolute margin-bottom: 0; border: none; text-align: right; }

Gracias! :)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

imagen con posición absoluta en header

Publicado por Octavio (4 intervenciones) el 22/02/2016 22:11:29
Lo primero que veo es que después de "position:absolute" te falta un punto y coma. Suponiendo que esto sea un error al escribir el post tu problema podría deberse a que la capa padre donde quieres meter esta otra capa absoluta no es relativa (position:relative)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

imagen con posición absoluta en header

Publicado por eli (4 intervenciones) el 22/02/2016 22:27:36
Buenas noches, muchas gracias por responder :)
si, el punto y coma me di cuenta y lo agregué despues, disculpa.
Y cómo debo escribir entonces lo de la capa padre? Es que estoy un poco pegada en css... u^_^
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

imagen con posición absoluta en header

Publicado por Octavio (4 intervenciones) el 22/02/2016 22:50:16
Mírate este enlace que te explica un poco como funciona: http://www.isotipo.net/2007/06/posiciones-absolutas-dentro-de-relativas/

A grandes rasgos lo que te viene a decir es lo que comentaba arriba, que para posisionar absolutamente una capa dentro de otra, la capa padre tiene que ser relativa. Por ejemplo:

HTML
1
2
3
<div class='relativa'>
    <div class='absoluta'></div>
</div>

CSS
1
2
.relativa { position:relative; width:100%; min-height:80px; background-color:red;  }
.absoluta { position:absolute; width:20px; min-height:20px; background-color:green; top:0px; left:0px; }

Con este código, si vas jugando con los atributos 'top' y 'left' verás como la capa '.absoluta' se va posicionando en referencia a la capa '.relativa'
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

imagen con posición absoluta en header

Publicado por eli (4 intervenciones) el 22/02/2016 23:07:07
ahá! ya lo he leído y he entendido su funcionamiento.

Entonces yo declaro en el css esto:
.relativa { position:relative; width:100%; min-height:80px; background-color:red; }
.absoluta { position:absolute; width:20px; min-height:20px; background-color:green; top:0px; left:0px; }

Lo que se me escapa es: Qué es lo que tengo que escribir dentro del #header-top para que tome como referencia su posición?
Gracias!! :)

pd: la cosa es que las banderas ya me aparecían en absoluta (pero no lograba que salieran absolutas en el lado derecho) no se si eso cambia algo.... u^_^
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

imagen con posición absoluta en header

Publicado por Octavio (4 intervenciones) el 23/02/2016 07:40:11
Por lo que me comentas, prueba entonces a jugar con las propiedades 'top' y 'right'. Si la capa padre está en posición relativa y la capa #header-top en absoluta no deberías de tener problemas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

imagen con posición absoluta en header

Publicado por eli (4 intervenciones) el 23/02/2016 11:10:21
perfecto! muchas gracias a todos!! :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jordi

imagen con posición absoluta en header

Publicado por Jordi (2 intervenciones) el 22/02/2016 22:42:21
Hola Ellie,

Uno de los trucos principales para probar cosas rápidas en CSS es utilizar el inspector de elementos de Chrome (o de otro navegador) y ahí agregar las propiedades de estilos. El efecto es inmediato y se pueden ver los resultados de inmediato.

Tal vez lo que pase es que otra de las clases que tiene sobrescriba algo de lo que le estás poniendo.
Prueba con position:absolute!important;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar