Why position:sticky is not working when the element is wrapped inside another one?
position:sticky
consider the parent element to behave as it should be. In your case the parent element has its height defined by the sticky element so there is no room for the element to have a sticky behavior
Add border to better see the issue:
.nav-wrapper {
position: absolute;
bottom: 0;
border: 2px solid;
}
.nav-wrapper nav {
position: sticky;
top: 0;
}
body {
min-height:200vh;
}
<div class="nav-wrapper">
<nav>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
</nav>
</div>
Position sticky not taking effect
The sticky element in your fiddle has no height setting - use a set height
to avoid that, then the sticky position works:
https://jsfiddle.net/rocz5nL1/
Why position sticky is not working in my code?
Its because you have overflow-x-hidden in parent . sticky doesn't work if parent overflow is hidden.
{!categorySearch && (
<div className="max-w-2xl mx-auto z-40 relative font-metropolis_semibold">
<div className="sticky top-0">
<div className=" z-40 bg-white w-full transition-all">
<div
id="logo"
className={
logo
? "px-md mt-10 font-medium"
: "px-md mt-10 font-medium animate"
}
>
<div className="overflow-x-hidden ">
<img
src={settings.logo_intro_image_url}
alt={settings.name}
className="max-w-full object-contain company-logo"
style={{ height: settings.logo_height }}
id="company-logo"
/>
</div>
</div>
<div
className={`${
logo
? "shadow-none border-none"
: "border-b-2 border-gray-200"
}`}
>
<TopOptions
showOption={showOption}
setShowOption={setShowOption}
addBorder={logo}
outlets={outlets}
languageLabels={languageLabels}
settings={selectedOutlet.settings}
/>
</div>
</div>
{Object.keys(bannerArray).length === 1 ? (
<div className="w-full px-md border-b-8 border-banner pb-md">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<>
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
</>
);
})}
</div>
) : (
<div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
);
})}
</div>
)}
<div className="flex flex-row justify-between items-center px-md my-25p">
<p className="font-metropolis_regular text-sm break-words">
{languageLabels.like_to_order}
</p>
<img
src={Search}
alt="search"
onClick={() => setCategorySearch(true)}
/>
</div>
<div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
{categoryList.map((category) => {
// console.log(category);
return (
<Dishes
key={category.category_id}
category={category}
languageLabels={languageLabels}
loading={loadingCategories}
/>
);
})}
</div>
<BottomNavigation
languageLabels={languageLabels}
isLoyalty={settings.enable_reward_points_functionality}
/>
</div>
</div>
)}
Aligning position sticky at the bottom right is not working
Try this:
.chat {
width: 55px;
height: 55px;
position: fixed;
bottom: 20px;
left: 20px;
background: red;
border: 0;
}
position: fixed is key element.
My sticky positioned element isn't acting like it should
You're div with the id of main
has overflow-x: hidden
. That div is the parent of the child that you want sticky and overflow hidden doesn't play well with position: sticky. Remove the overflow-x: hidden
css and it works (line #118 in your style.css):
#main{
min-height:100%;
width: 100%;
/* overflow-x: hidden; */ //remove this
}
There's nothing overflowing, anyhow.
How does the position: sticky; property work?
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
...
You must specify a threshold with at least one oftop
,right
,bottom
, orleft
for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
[source: MDN]
So in your example, you have to define the position where it should stick in the end by using the top
property.
html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
Related Topics
Image Popup on Hover in Dt in R
MVC Cannot Display Image Using Background-Url in CSS - Uses Bundling
Web-Kit and Sub-Pixel Values, Workaround
Media Query for High Resolution Mobile 1080Px (Xperia Z etc)
Equal Height Bootstrap Cards Within Slick Carousel
How to Get the Same Object with a Class in SCSS
How to Target CSS Class Names That Start with Digit
How to Repeat a CSS Grid Layout Pattern
Can You Float a Div in the Lower Right of Its Parent Div and Have Text Wrap Around It
Why Is This 11 Class Selector Less Specific Than the Id
Css: Element Has 'Display: Block' and Doesn't Start a New Line
How to Code an Arrow Using CSS
Applying CSS on Drawn Canvas Elements
Selector for All a Tag Descendants