Merhabalar,
Benim Bir kutum var ve bu kutunun içinde sidebarım var
kutunun sonuna kadar takip etmesini istiyorum ama kutunun dışına çıkmasını istemiyorum position:fixed ile bütün sayfayı takip ediyor.
Bunu nasıl yapabilirim ve ya ne diye aratabilirim internetten yardımcı olabilirmisiniz
html Kodum
<html>
<head>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<ul class="menu">
<li class="menu-item">Ana Sayfa</li>
<li class="menu-item">Kategoriler</li>
<li class="menu-item">Blog</li>
</ul>
</header>
<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
<div class="icerik">
İçerik5
</div>
<div class="icerik">
İçerik6
</div>
<div class="icerik">
İçerik7
</div>
<div class="sidebar">
<div class="sidebar-main">
<div class="sidebar-title">Yeni Yazılar</div>
<div class="sidebar-icerik">İçerik1</div>
<div class="sidebar-icerik">İçerik2</div>
<div class="sidebar-icerik">İçerik3</div>
<div class="sidebar-icerik">İçerik4</div>
</div>
<div class="sidebar-main">
<div class="sidebar-title">Diğer</div>
<div class="sidebar-icerik">Kayıt Ol</div>
<div class="sidebar-icerik">Giriş Yap</div>
<div class="sidebar-icerik">Blog</div>
<div class="sidebar-icerik">Forum</div>
</div>
</div>
</main>
<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
</main>
<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
</main>
<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
</main>
<footer>
</footer>
</body>
Main.Css İçeriğim :
.sidebar {
position:fixed;right:8px;top:42px;}
.kutu {
background:#2b2626;
color:white;
margin-bottom:50px;
}
.menu {display:flex;}
.menu-item {margin-right:55px;list-style:none;}
.icerik {
padding:15px;}
.sidebar-icerik {
margin-bottom:15px;}
.sidebar-title {
background:red;}Yapmak İstediğim Açıkcası Şu :
Resimdeki Yerin kutu dışına çıkmaması ama kutunun içinde hareket etmesi