Absolutamente sí

11/May/2007 250

Una propiedad muy importante de CSS es position. Con ella, podemos estructurar nuestro sitio web, aunque según mi perspectiva prefiero utilizar float y display para lograr lo mismo. Enfin, cosa de gustos. Algunas veces eso sí se me ha hecho necesario utilizar position para manejar la posición de un elemento por sobre otro, o respecto a mi ventana.

La propiedad position ubica un elemento en varios estados: static, relative, absolute o fixed. Detallemos:

SafariFirefoxInternet Explorer 7OperaCaminoInternet Explorer 6
  • Static: es por defecto en las etiquetas. Un elemento con position: static; siempre tiene la posición normal con que fluye a diagramación de la página.
  • Relative: un elemento con position: relative; se mueve con respecto a su posición normal. Al definirlo, podemos posicionarlo top: 20px; respecto a su posición actual.
  • Absolute: una etiqueta con position: absolute; es posicionado respectivamente a su contenedor bloque, sea éste el DIV padre, o el BODY. Su posición también es especificada por top, right, bottom, left.
  • Fixed: un elemento con position: fixed; queda fijo respectivo a la ventana del browser, no importanto el movimiento de éste o del scroll que produzca. Obedece también a top, right, bottom y left.

¿Se fijaron que para position no se ocupa margin-top, o margin-left? Sólo para que lo tengan en cuenta. Ahora, tal como quedó plasmado en el título de este artículo, en este caso mencionaré específicamente la propriedad position: absolute. Esta propiedad es muy útil si quieres ubicar elementos por sobre otros, no importando donde éstos estén ubicados. En esta ocasión, 2 ejemplos gráficos. Comenzaremos con el HTML base que regirá ambos ejemplos:

<div id="contenido">
     <h1>T&iacute;tulo</h1>
     <p>Lorem ipsum dolor sit amet,…….</p>
     <p>Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend. Phasellus eros. Praesent ac diam….</p>
     <img src="csslab.gif" />
</div>

Nada de otro mundo. Un contenedor que tiene un título, y dos párrafos de texto en sus respectivas etiquetas, para finalmente mostrar una imagen. Ahora, a través del CSS, esta página se verá un poco mejor estéticamente. La idea como mencioné es mostrar a través de 2 ejemplos las combinaciones que permiten posicionar en este caso a la imagen respecto a la ventana del browser, y a su etiqueta contenedora.

#contenido {
     width: 450px;
     float: left;
}
     #contenido h1 {
          text-align: center;
          color: #F00;
     }
     #contenido p {
          padding: 10px 10px 10px 15px;
          font-size: 12px;
          line-height: 140%;
     }
     #contenido img {
          position: absolute;
          width: 230px;
          height: 100px;
          top: 0;
          right: 0;
     }

Como se habrá notado, sólo se definió en la etiqueta IMG que ésta estuviera posicionada absolutamente, arriba y a la derecha (top: 0; right: 0;). Con esto, verán que la imagen estará ubicada en la parte superior derecha de nuestra ventana de browser, y se moverá respecto a su resolución.

Ver ejemplo

Ahora, agregaremos un position: relative al contenedor. Con esto, verán que la imagen nuevamente estará posicionada sobre nuestros elementos, pero en esta ocasión respecto a su contenedor bloque. Con esta propiedad declarada, definimos que div#contenido es su elemento bloque contenedor, y por lo tanto que sujete a IMG dentro de sí.

#contenido {
     width: 450px;
     float: left;
     position: relative;
}
     #contenido h1 {
          text-align: center;
          color: #F00;
     }
     #contenido p {
          padding: 10px 10px 10px 15px;
          font-size: 12px;
          line-height: 140%;
     }
     #contenido img {
          position: absolute;
          width: 230px;
          height: 100px;
          top: 0;
          right: 0;
     }

Ver ejemplo relativo

Links:

Comentarios

  1. gay dating ct [#]

    leimert park gay dating https://gaychatus.com/

  2. Dksvpt [#]

    real money casino games – winslotgms jackpot party casino

  3. gay 40s dating 23 year old [#]

    on-line gay dating https://freegaychatnew.com/

  4. gay dating sw wa [#]

    what like gay men dating women https://gaychatgay.com/

  5. professional gay dating london [#]

    gay dating like craigslist https://gaydatingzz.com/

  6. Phoydk [#]

    erectile dysfunction causes – erectile dysfunction drugs ed medications

  7. Yihwvg [#]

    erectile dysfunction drugs – best male ed pills erectile dysfunction pump

  8. KevinWet [#]

    gay dating sites below 18
    gay police dating
    gay latinos dating

  9. KevinWet [#]

    100% free gay dating sites
    hiv pos gay dating sites
    gay but dating a girl

  10. Kffrlc [#]

    where can you buy prednisone without a prescription – 1250 mg prednisone prednisone price canada

  11. Olkyxu [#]

    prednisone brand – cortisol prednisone prednisone 40mg

  12. Pwgtkd [#]

    where can i buy viagra otc – genuine viagra online uk female viagra 50 mg

  13. Sabrina [#]

    Pretty nice post. I just stumbled upon your blog and wanted
    to say that I’ve really enjoyed browsing your blog posts.

    After all I will be subscribing to your rss feed and
    I hope you write again very soon!

  14. it web hosting [#]

    Hello to all, for the reason that I am in fact keen of reading this
    web site’s post to be updated daily. It contains good material.

  15. web hosting your [#]

    I have been browsing on-line greater than 3 hours lately, yet
    I by no means discovered any interesting article like
    yours. It is pretty price sufficient for me. In my view, if all site owners and bloggers made good content as you probably did, the internet will likely be a lot
    more helpful than ever before.

  16. web hosting a [#]

    Have you ever considered writing an ebook or guest authoring on other
    websites? I have a blog centered on the same information you discuss
    and would really like to have you share some stories/information. I know my subscribers would appreciate your work.
    If you’re even remotely interested, feel free to shoot me an e
    mail.

  17. t.co [#]

    My family members always say that I am wasting my time here at web, however I know
    I am getting know-how daily by reading such nice content.

  18. bit.ly [#]

    Thanks for finally talking about > Absolutamente sí | CSSLab
    | Laboratorio de ideas web < Loved it!

  19. Michaelpycle [#]

    grindr scam gay male dating
    dallas gay dating
    gay ebony dating

  20. Michaelpycle [#]

    kenya gay dating
    best gay dating sites for nerds
    halifax gay dating

  21. ivermectin [#]

    ivermectin brand name Absolutamente si | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin pills for humans

  22. gay online dating tips [#]

    badoo gay dating https://dating-gaym.com/

  23. totally free gay dating sites [#]

    gay dating sites for married https://gayedating.com/

  24. ivermectin1.com [#]

    ivermectin tablets Absolutamente si | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ generic stromectol

  25. gay dating sites reviews [#]

    eddie redmayne gay dating https://gaydatinglosangeles.com/

  26. http://app.gumroad.com/asmr2021/p/best-asmr-online [#]

    You could definitely see your skills in the article you write.
    The sector hopes for more passionate writers such as you who
    are not afraid to mention how they believe. At all times follow your heart.
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  27. quest bars in [#]

    great issues altogether, you simply won a logo new reader.
    What might you recommend in regards to your
    submit that you made some days ago? Any certain? quest bars http://j.mp/3jZgEA2 quest bars

  28. gay dating recon [#]

    actual gay dating sites https://gayonlinedating.net/

  29. http://bit.ly [#]

    My brother suggested I might like this web site. He was entirely
    right. This post actually made my day. You cann’t imagine simply how much
    time I had spent for this information! Thanks! cheap flights http://1704milesapart.tumblr.com/ cheap
    flights

  30. tinyurl.com [#]

    It’s actually a nice and helpful piece of info. I’m satisfied
    that you just shared this helpful info with us.
    Please keep us up to date like this. Thanks for sharing.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis
    surgery

  31. iherb.com [#]

    Thanks designed for sharing such a fastidious idea, article is good,
    thats why i have read it fully quest bars https://www.iherb.com/search?kw=quest%20bars quest
    bars

  32. HenryUnfiP [#]

    gay men dating website email
    catholic gay dating
    gay dating sierra vista

  33. HenryUnfiP [#]

    best gay dating sites in europe
    gay dating site in usa
    gay dating sites like grindr

  34. coub.com [#]

    Hi there, You have done a great job. I’ll definitely digg it
    and personally recommend to my friends. I’m sure they will be benefited from this web
    site. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  35. zithromaxeska [#]

    zithromax 250 mg dosage zithromax cures cytromax

  36. tinyurl.com [#]

    Touche. Outstanding arguments. Keep up the good work.
    ps4 games https://tinyurl.com/45xtc52b ps4 games

  37. HenryUnfiP [#]

    gay dating service new york
    hiv gay dating sites
    gay snap dating

  38. HenryUnfiP [#]

    gay guy dating trans man
    teen gay dating sites
    bear gay dating

  39. cetirizine hydrochloride 5 mg tablets [#]

    claritin vs zyrtec – https://allergyd.com

  40. steroidprednisone [#]

    prednisone tablets prednisone long term side effects

  41. modafinilotc [#]

    provigil prescription modafinil reviews

  42. ivermektin 3 mg tabletta adag [#]

    stromectol gГ©nГ©rique http://stromectolforte.com/ ivermectin 3 mg ivermectin dosage chart for humans

  43. modalertonline [#]

    provigil pill provigil vs modafinil

  44. periactin [#]

    zyrtec d generic – http://allergyd.com

  45. buy stromectol pills [#]

    ivermectin 3 mg http://stromectolforte.com/ stromectol cost ivermectin cream

  46. accutune [#]

    isotretinoina accutune

  47. prednisolon [#]

    side effects for prednisolone prednisone prescriptions

  48. provigil100mg [#]

    modafinil side effects adderall vs modafinil

  49. modafinilsmartdrug [#]

    modalert vs modvigil provigil

CSSLab