Is there any way to completely move an element position depending on screen size ? CSS-CodePudding

So I'm trying to learn HTML and CSS for now, and not getting yet into jvS. I'm trying to create a responsive design, and I understand media queries somehow.

Basically, I have a screen-size width nav bar on the desktop with a logo in it. When I get to phone sizes, I want that logo to move on the right bottom corner of the screen and be sticky there.

Do you know that sign on Twitter when you want to post? I want to do something like that. BUT I want to know if I can just move the element I already created for the navbar, or do I need a completely new element?

This is in HTML

header {
    background-color: chartreuse;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 20px;
}

<header>
    <img  src="/Assets/Logo.png" alt="logo">
    <nav>
        <ul class = "links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Recipes</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <a  href="#"><button>Youtube</button> </a>
</header>

And I basically need that logo to move on the right bottom of the screen on screen sizes smaller than 500px. I can't find any answers, so if you have any suggestions please help me!

CodePudding user response：

To take an element out of the document flow and fix it at a particular position on the screen, you can use position: fixed and the top/bottom/left/right parameters, and you can put all that into a media query to apply it only below a certain screen size.

CodePudding user response：

You can achieve this by utilizing position: fixed. This rule assigns fixed positioning on an element, which in other words means no matter how horizontally or vertically big is your page, the element will stay in the same place.

poistion: fixed works almost the same way as position: absolute. You specify the element's positioning, according to the parent relative element. This is the css you're looking for:

@media screen and (max-width: 499px) {
  .logo {
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
}

Keep in mind that every parent element (every element above the image) cannot have position: relative, because the bottom and right rules will count from the bottom and right section of the relative element. The only tag above the image you can specify position: relative to, is either body or html.