Skip to content

Instantly share code, notes, and snippets.

@kobitoDevelopment
Last active February 26, 2025 07:18
Show Gist options
  • Save kobitoDevelopment/0e2bed2202bd34da3ad8d4f1e560b174 to your computer and use it in GitHub Desktop.
Save kobitoDevelopment/0e2bed2202bd34da3ad8d4f1e560b174 to your computer and use it in GitHub Desktop.
.container {
position: relative;
width: 100%;
height: 200vh;
max-width: 1920px;
margin-inline: auto;
background-color: green;
overflow-x: clip;
}
.header {
position: fixed;
max-width: 1920px;
left: 50%;
translate: -50% 0;
height: 80px;
width: 100%;
overflow-x: clip;
background-color: blue;
}
.menu-1 {
position: fixed;
top: 0;
right: 0;
width: 50%;
height: 100vh;
display: flex;
align-items: flex-end;
translate: 100% 0; /* これを消して挙動を確認 */
background-color: red;
}
.menu-2 {
position: fixed;
top: 0;
right: 0;
width: 50%;
height: 100vh;
display: flex;
align-items: flex-end;
translate: 100% 0; /* これを消して挙動を確認 */
background-color: orange;
}
<div class="container">
<div class="header">
<div class="menu-2">
<a href="https://google.com">クリックできないリンク</a>
</div>
</div>
<div class="menu-1">
<a href="https://google.com">クリックできるリンク</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment