Pozicionovanie

Position vlastnosť špecifikuje druh pozicionovania elementu na stránke, pričom nadobúda hodnoty:

  • static – statická pozícia, elementy sa zobrazujú v poradí, v akom sú zapísané v HTML štruktúre. Predvolená hodnota
  • absolute – absolútna pozícia, element je umiestnený v rámci elementu v štruktúre rodičovských elementov, ktorý má ako prvý definovanú inú pozíciu, ako static
  • fixed – element je umiestnený relatívne k oknu prehliadača
  • relative – element je umiestnený relatívne k svojej pôvodnej pozícii

 

Na to, aby sme vedeli elementom posúvať, pokiaľ má nastavenú pozíciu na inú ako static, potrebujeme ďalšie vlastnosti:

  • top – osadenie od vrchu. Má prednosť pred vlastnosťou bottom
  • right – osadenie zprava
  • bottom – osadenie zo spodu
  • left – osadenie zľava. Má prednosť pred vlastnosťou right

Možné použitia

Zafixované horné menu na stránke

HTML

<header>
    <nav class="container">
        <ul class="menu clearfix">
            <li><a href="index.html"></a>Odkaz</li>
            <li><a href="index.html"></a>Odkaz</li>
            <li><a href="index.html"></a>Odkaz</li>
            <li><a href="index.html"></a>Odkaz</li>
            <li><a href="index.html"></a>Odkaz</li>
        </ul>
    </nav>
</header>

<div id="main">...</div>

CSS

header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.container{
    max-width: 1024px;
    padding: 0 30px;
}

.menu{
    background: black;
}

.menu li{
    float: left;
}

.menu a{
    color: white;
    text-decoration: none;
}

.menu a:hover{
    color: grey;
}

.clearfix:before,
.clearfix:after{
    content: "";
    display: table;
    clear: both;
}

Umiestnenie obrázku na spodku textu vpravo

HTML

<div class="image-container">
    <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper et diam vitae faucibus. Suspendisse fringilla neque ac vestibulum maximus. Vivamus scelerisque eu magna ut pretium. Nam bibendum sodales ullamcorper. Aliquam iaculis, purus ac elementum porta, ipsum ligula faucibus dui, eu aliquet dolor risus ac metus. Nunc eget elit vestibulum, lacinia leo id, cursus velit. Etiam congue pulvinar tellus quis tincidunt. Maecenas quis quam quis justo dictum efficitur finibus tempor enim. In volutpat scelerisque enim eget imperdiet. Donec sed urna ac tortor tincidunt tristique.</p>
        <p>Aenean iaculis egestas sem eget tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce fermentum ligula molestie, aliquet sapien id, mattis odio. Mauris eu pharetra tellus. Quisque volutpat ipsum nec ex scelerisque dapibus. Ut faucibus, justo sed elementum imperdiet, lectus massa laoreet dui, non finibus ipsum arcu eget neque. Praesent a placerat dui. Vestibulum commodo enim eu egestas convallis. Duis odio enim, viverra id eros dictum, facilisis malesuada metus. Cras nec justo faucibus, pharetra lacus ut, gravida mauris. Sed lacinia tempor nisi, vitae faucibus sapien porttitor quis. Nam convallis, lectus in auctor semper, enim odio dapibus nibh, et pulvinar dolor lacus et leo. Morbi id lacinia lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
    <img src="http://zuzana.kepesiova.sk/VT/wp-content/uploads/2017/09/vkMAw_s-200x150.gif" alt="Unicorn" width="200" height="150" class="absolute-image" />
</div>

CSS

.image-container{
    position: relative;
    width: 750px;
    margin: 50px auto;
    background: #f5f3f9;
    padding-right: 250px;
}

.absolute-image{
    position: absolute;
    right: 25px;
    bottom: 25px;
}