css position özelliği, Html elementinin konumlandırma özelliklerini belirlemek için kullanırız. Bu özellik çok kullanılan bir özelliktir.
Aldığı değerler :
static : Durağan. Html sayfası akışına göre sırayla dizilir. ( top, bottom, left ve right özelliklerinden etkilenmez. Varsayılan değerdir.)
relative : Göreceli. ( Bulunduğu konumdan top, bottom, left ve right özellikleri ile yer değiştirebiliriz.)
absolute : Mutlak. body e veya istenilen bir elemente göre bir yere konumlandırır.
fixed : Sabit . Html sayfasında istenilen yere sabitler.
sticky : Yapışkan. İstenilen bir noktaya göre sabitleriz.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Html elementinin position özelliğine verilen değerlere göre konum belirlemek için top, bottom, left ve right özelliklerine değerler veririz.
top : Html elementini üstten hizalamak için kullanırız.
bottom : Html elementini alttan hizalamak için kullanırız.
left : Html elementini soldan hizalamak için kullanırız.
right : Html elementini sağdan hizalamak için kullanırız.
Aldıkları değerler:
length : Uzunluk değeri veririz.
auto : Otomatik değer alır.
initial : Varsayılan değere çevirir.
Örnek 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.first,
.second,
.third {
margin-bottom: 10px;
border: 1px solid #dedede;
width: 150px;
height: 150px;
}
.first .two {
position: static;
top: 20px;
}
.second .two {
position: relative;
top: 20px;
left: 50px;
}
.third {
position: relative;
}
.third .one{
position: absolute;
bottom: 10px;
right: 10px;
}
.third .two{
position: absolute;
bottom: 50px;
left: 50px;
}
.third .three{
position: absolute;
top: 10px;
right: 50px;
}
.fourth{
position: absolute;
bottom: 0;
left: 45%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="first">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="second">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="third">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="fourth">
position : absolute (body e göre)
</div>
</body>
</html>
Yukarıdaki örnekte görüldüğü gibi first class ına sahip eleman ile position static, second ile position relative, third ve fourth ile position absolute örneği verdik.
css position fixed özelliğine en güzel örnek web sitelerinde sağ alt köşede bulunan back to top özelliğidir. Alt sağda sabit olan bir buton sayesinde en üstte gidilir. Bu buton sayfa hareket etse de sabittir.
position sticky özelliğine en güzel örnek web sitelerinde menuler diyebiliriz. Üstte bulunan menuler sayfanın en üstüne yapışır.
Örnek: Burada basit bir web sayfasında menu ve back to top örneği yapmış olduk.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
background-color: black;
color: white;
text-align: right;
padding: 10px;
}
.menu {
background-color: yellow;
padding: 10px;
position: sticky;
top: 0;
}
ul {
display: block;
list-style-type: none;
margin: 0 auto;
width: 240px;
}
ul li {
display: inline-block;
margin-right: 20px;
font-size: 24px;
}
.content {
padding: 20px 40px;
font-size: 40px;
height: 1000px; /* sayfa uzun olsun diye */
}
.backToTop {
position: fixed;
background-color: blue;
color: white;
bottom: 20px;
right: 20px;
width: 60px;
height: 40px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="header">
<span>phone :123456789</span>
<span> email@email.com</span>
</div>
<div class="menu">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In cum cupiditate pariatur dolor laudantium ut dolorum
voluptate, blanditiis doloremque saepe quod debitis minus iure eveniet fugit. Deleniti itaque voluptates
accusamus, beatae modi cumque facilis consectetur est iure quos ipsam cupiditate ipsum. Fugit quos recusandae
ipsum fugiat voluptates tempora aliquid! Nesciunt id minus possimus! Fugit magni dolor dolore aspernatur cum
praesentium nisi pariatur ex? Autem dignissimos maxime molestiae corrupti dolore natus, iste sit. Perspiciatis
nisi recusandae, voluptatem est qui atque ullam, temporibus voluptas neque eos odio illo soluta esse ex
repudiandae perferendis, quas iusto. Laboriosam ipsam, voluptas, sunt impedit, incidunt natus id consectetur
error quaerat modi omnis animi recusandae eos nam? Hic magni exercitationem obcaecati. Quos, ipsam excepturi
architecto libero vel necessitatibus unde alias ab, magni natus quo maiores corrupti hic ipsa deleniti dolore
voluptate rerum adipisci officiis molestias explicabo repudiandae odit! At voluptatibus inventore nemo natus
molestias quis deserunt culpa iure quaerat? Provident ratione assumenda atque tempora hic praesentium, quo natus
labore voluptatum id voluptas sint blanditiis obcaecati nihil ipsam suscipit repellendus in aperiam et, tenetur
similique. Accusantium autem sint tempore, aspernatur quibusdam, optio ad, adipisci laborum sequi mollitia
accusamus vel blanditiis. Quam iusto consequatur praesentium ipsum quis veniam voluptate!
</div>
<div class="backToTop">
toTop
</div>
</body>
</html>Bu örneği incelemek için herhangi bir text sayfası açıp örnek kodları içine alıp uzantısını html olarak kaydettiğinizde web sayfası olarak inceleyebilirsiniz…. herhangi ide ile de html sayfası oluşturup kodları alıp kaydederek de yapabilirsiniz. Sonuç olarak web sitelerinde çok karşılaşacağınız bir özelliktir bundan dolayı iyi öğrenmenizi tavsiye ederiz.
Başka bir yazımızda görüşmek üzere…
