英文:
Trying to create an overlapping element to the screen when a card is clicked
问题
基本上，我想要一个新的元素来覆盖其他所有元素，以营造当点击卡片时出现新屏幕的幻觉。看起来我做到了，但问题出现在调整屏幕大小时，然后那些元素看起来很不协调。
这是我使用的 CSS 代码：
.overlap {
max-width: 1000px;
background-color: #4f00e7;
position: sticky;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
padding: 30px;
border-radius: 10px;
}
还有我正在工作的网站：https://strong-salamander-b1af56.netlify.app/portfolio
谢谢，祝您有美好的一天！
英文:
Basically I want a new element to override every other element to give the illusion that a new screen has appeared when a card is clicked. Looks like I did it but the problem appears when I resize the screen, then that elements looks very off.
This is the css code that I used:
.overlap {
max-width: 1000px;
background-color: #4f00e7;
position: sticky;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
padding: 30px;
border-radius: 10px;
}
And also the site Im working on: https://strong-salamander-b1af56.netlify.app/portfolio
Thank you and have a nice day!
答案1
得分: 1
也许你应该尝试使用 position: fixed。
.overlap {
max-width: 1000px;
background-color: #4f00e7;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
padding: 30px;
border-radius: 10px;
}
content
<div class="overlap">overlap</div>
英文:
Maybe you should try with position: fixed
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.overlap {
max-width: 1000px;
background-color: #4f00e7;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
padding: 30px;
border-radius: 10px;
}
<!-- language: lang-html -->
content
<div class="overlap">overlap</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论