Problems with sticky positioning

I am experimenting with sticky nav and I ran into problem. Problem is that when I put the nav in other element it's not anymore sticky.

.nav-wrapper{

  position: absolute; 

  bottom: 0;

}



.nav-wrapper nav{

  position: sticky;

  top: 0;

}

    <div class="nav-wrapper">

     <nav>

      <a href="#"><li>Home</li></a>

      <a href="#"><li>About</li></a>

     </nav>

    </div>

edited yesterday

Temani Afif

70.8k93877

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

I believe (but don't know for sure) the question was being downvoted because it lacked code before your revision 4 minutes ago.

– jww
Oct 25 '18 at 19:43

but i believe that this problem can be solved without code by person that knows css well :)

– Kristers Dzintars
Oct 25 '18 at 19:46

There is no problem that can be solved without code ... the problem arised from a particular code that's what we need to see a code

– Temani Afif
Oct 25 '18 at 20:40

add a comment |

I am experimenting with sticky nav and I ran into problem. Problem is that when I put the nav in other element it's not anymore sticky.

.nav-wrapper{

  position: absolute; 

  bottom: 0;

}



.nav-wrapper nav{

  position: sticky;

  top: 0;

}

    <div class="nav-wrapper">

     <nav>

      <a href="#"><li>Home</li></a>

      <a href="#"><li>About</li></a>

     </nav>

    </div>

edited yesterday

Temani Afif

70.8k93877

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

I believe (but don't know for sure) the question was being downvoted because it lacked code before your revision 4 minutes ago.

– jww
Oct 25 '18 at 19:43

but i believe that this problem can be solved without code by person that knows css well :)

– Kristers Dzintars
Oct 25 '18 at 19:46

There is no problem that can be solved without code ... the problem arised from a particular code that's what we need to see a code

– Temani Afif
Oct 25 '18 at 20:40

add a comment |

I am experimenting with sticky nav and I ran into problem. Problem is that when I put the nav in other element it's not anymore sticky.

.nav-wrapper{

  position: absolute; 

  bottom: 0;

}



.nav-wrapper nav{

  position: sticky;

  top: 0;

}

    <div class="nav-wrapper">

     <nav>

      <a href="#"><li>Home</li></a>

      <a href="#"><li>About</li></a>

     </nav>

    </div>

edited yesterday

Temani Afif

70.8k93877

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

I am experimenting with sticky nav and I ran into problem. Problem is that when I put the nav in other element it's not anymore sticky.

.nav-wrapper{

  position: absolute; 

  bottom: 0;

}



.nav-wrapper nav{

  position: sticky;

  top: 0;

}

    <div class="nav-wrapper">

     <nav>

      <a href="#"><li>Home</li></a>

      <a href="#"><li>About</li></a>

     </nav>

    </div>

.nav-wrapper{

  position: absolute; 

  bottom: 0;

}



.nav-wrapper nav{

  position: sticky;

  top: 0;

}

    <div class="nav-wrapper">

     <nav>

      <a href="#"><li>Home</li></a>

      <a href="#"><li>About</li></a>

     </nav>

    </div>

.nav-wrapper{

  position: absolute; 

  bottom: 0;

}



.nav-wrapper nav{

  position: sticky;

  top: 0;

}

    <div class="nav-wrapper">

     <nav>

      <a href="#"><li>Home</li></a>

      <a href="#"><li>About</li></a>

     </nav>

    </div>

html css css3 sticky

edited yesterday

Temani Afif

70.8k93877

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

edited yesterday

Temani Afif

70.8k93877

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

edited yesterday

Temani Afif

70.8k93877

edited yesterday

Temani Afif

70.8k93877

edited yesterday

Temani Afif

70.8k93877

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

asked Oct 25 '18 at 19:16

Kristers Dzintars

608

I believe (but don't know for sure) the question was being downvoted because it lacked code before your revision 4 minutes ago.

– jww
Oct 25 '18 at 19:43

but i believe that this problem can be solved without code by person that knows css well :)

– Kristers Dzintars
Oct 25 '18 at 19:46

There is no problem that can be solved without code ... the problem arised from a particular code that's what we need to see a code

– Temani Afif
Oct 25 '18 at 20:40

add a comment |

I believe (but don't know for sure) the question was being downvoted because it lacked code before your revision 4 minutes ago.

– jww
Oct 25 '18 at 19:43

but i believe that this problem can be solved without code by person that knows css well :)

– Kristers Dzintars
Oct 25 '18 at 19:46

There is no problem that can be solved without code ... the problem arised from a particular code that's what we need to see a code

– Temani Afif
Oct 25 '18 at 20:40

I believe (but don't know for sure) the question was being downvoted because it lacked code before your revision 4 minutes ago.

– jww
Oct 25 '18 at 19:43

but i believe that this problem can be solved without code by person that knows css well :)

– Kristers Dzintars
Oct 25 '18 at 19:46

There is no problem that can be solved without code ... the problem arised from a particular code that's what we need to see a code

– Temani Afif
Oct 25 '18 at 20:40

add a comment |

1 Answer
1

active

oldest

votes

Position sticky consider the parent element to behave as it should be. In your case the parent element has his height defined by the sticky element so there is no room for the element to be sticky.

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>

Now add height to the parent element and see what is happening:

.nav-wrapper {

  position: absolute;

  bottom: 0;

  border: 2px solid;

  height:80vh;

}



.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>

The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.

A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.^ref

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

Thank you for helping me out :)

– Kristers Dzintars
Oct 25 '18 at 20:47

1

@TemaniAfif You're always teaching new things :)

– Dogukan Cavus
yesterday

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52996574%2fproblems-with-sticky-positioning%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Position sticky consider the parent element to behave as it should be. In your case the parent element has his height defined by the sticky element so there is no room for the element to be sticky.

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>

Now add height to the parent element and see what is happening:

.nav-wrapper {

  position: absolute;

  bottom: 0;

  border: 2px solid;

  height:80vh;

}



.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>

The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.

A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.^ref

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

Thank you for helping me out :)

– Kristers Dzintars
Oct 25 '18 at 20:47

1

@TemaniAfif You're always teaching new things :)

– Dogukan Cavus
yesterday

add a comment |

Position sticky consider the parent element to behave as it should be. In your case the parent element has his height defined by the sticky element so there is no room for the element to be sticky.

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>

Now add height to the parent element and see what is happening:

.nav-wrapper {

  position: absolute;

  bottom: 0;

  border: 2px solid;

  height:80vh;

}



.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>

The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.

A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.^ref

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

Thank you for helping me out :)

– Kristers Dzintars
Oct 25 '18 at 20:47

1

@TemaniAfif You're always teaching new things :)

– Dogukan Cavus
yesterday

add a comment |

Position sticky consider the parent element to behave as it should be. In your case the parent element has his height defined by the sticky element so there is no room for the element to be sticky.

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>

Now add height to the parent element and see what is happening:

.nav-wrapper {

  position: absolute;

  bottom: 0;

  border: 2px solid;

  height:80vh;

}



.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>

The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.

A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.^ref

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

Position sticky consider the parent element to behave as it should be. In your case the parent element has his height defined by the sticky element so there is no room for the element to be sticky.

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>

Now add height to the parent element and see what is happening:

.nav-wrapper {

  position: absolute;

  bottom: 0;

  border: 2px solid;

  height:80vh;

}



.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>

The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.

A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.^ref

.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>

.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>

.nav-wrapper {

  position: absolute;

  bottom: 0;

  border: 2px solid;

  height:80vh;

}



.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>

.nav-wrapper {

  position: absolute;

  bottom: 0;

  border: 2px solid;

  height:80vh;

}



.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>

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

answered Oct 25 '18 at 20:45

Temani Afif

70.8k93877

Thank you for helping me out :)

– Kristers Dzintars
Oct 25 '18 at 20:47

1

@TemaniAfif You're always teaching new things :)

– Dogukan Cavus
yesterday

add a comment |

Thank you for helping me out :)

– Kristers Dzintars
Oct 25 '18 at 20:47

1

@TemaniAfif You're always teaching new things :)

– Dogukan Cavus
yesterday

Thank you for helping me out :)

– Kristers Dzintars
Oct 25 '18 at 20:47

@TemaniAfif You're always teaching new things :)

– Dogukan Cavus
yesterday

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk