英文:
Cannot see HTML div
问题
我第一次开始构建网站，但在.Main div方面遇到了问题。我在CSS中为它设置了background-color: orange;，但我无法在任何地方看到它。在使用检查工具时，我可以看到它的位置是在1440 x 0。有人可以帮忙吗？
这是我目前的代码...
<div class="Main">
<div class="banner">
<h2 class="title">谢谢！</h2>
<p class="subheading">我非常感谢您与我联系。我会尽快回复您。</p>
<svg class="smiley" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"></path>
</svg>
</div>
<div class="cursor"></div>
</div>
希望这可以帮助您解决问题。
英文:
I am starting to build a website for the first time but I am having trouble with the .Main div. I am giving it a background-color: orange; on the CSS but I cannot see it anywhere. When using the inspector, I can see that it is positioned on 1440 x 0. Can someone help with this, please?
This is my code so far...
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const cursor = document.querySelector('.cursor')
const main = document.querySelector('.Main');
let cursorSize = 50;
document.addEventListener('mousemove', (event) => {
cursor.style.left = `${event.clientX - cursorSize / 2}px`;
cursor.style.top = `${event.clientY - cursorSize / 2}px`;
const isSelectable = event.target.tagName === 'P' || event.target.tagName === 'H2';
if (isSelectable) {
cursor.classList.add('hide'); // Hide the cursor when mouse is over text or text is selected
main.classList.add('cursor-text');
} else {
cursor.classList.remove('hide'); // Show the cursor when mouse is not over text and no text is selected
main.classList.remove('cursor-text');
}
});
document.addEventListener('mousedown', (event) => {
cursorSize = 20;
pointerStyle(event, cursorSize)
});
document.addEventListener('mouseup', (event) => {
cursorSize = 50;
pointerStyle(event, cursorSize)
});
let pointerStyle = (event, size) => {
let newX = event.clientX - size / 2;
let newY = event.clientY - size / 2;
cursor.style.width = `${size}px`;
cursor.style.height = `${size}px`;
cursor.style.left = `${newX}px`;
cursor.style.top = `${newY}px`;
}
<!-- language: lang-css -->
body {
font-family: 'Montserrat', sans-serif;
overflow-x: hidden;
width: 100%;
}
.Main{
cursor: none;
background-color: orange;
}
.cursor{
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: #84E6BC;
border-radius: 50%;
pointer-events: none;
}
.cursor.hide {
opacity: 0;
pointer-events: none;
}
.cursor-text {
cursor: text;
}
.banner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 40%;
background-color: #FFFFFF;
border-radius: 60px;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 2em;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
.subheading {
font-size: var(--p-size);
text-align: center;
margin-bottom: 40px;
}
.smiley {
fill: #84E6BC;
}
<!-- language: lang-html -->
<div class="Main">
<div class="banner">
<h2 class="title">Thank you!</h2>
<p class="subheading">I really appreciate you contacting me. I will be in touch shortly.</p>
<svg class="smiley" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
</svg>
</div>
<div class="cursor"></div>
</div>
<!-- end snippet -->
答案1
得分: 2
在 main 元素内部的元素是 position: fixed，这意味着它会固定在屏幕上，无论滚动到哪个位置。 这样做会使其脱离元素的正常 "流程"。 因为它脱离了正常的流程，所以它会折叠到 0px 的高度，因为里面没有实际占用空间的内容。
看下面的代码。 我已经注释掉了定位代码，并只使用 margin: 0 auto 来使 .Banner 元素水平居中。
FYI: 与你的问题无关，但对于光标，你将想要将其从 position: absolute 更改为 position: fixed - 否则，当你向下滚动页面时，位置不会与实际光标位置匹配。
英文:
The element inside of main is position: fixed which means it sticks to the screen at the position you specify regardless of scrolling. Doing this takes it out of the normal "flow" of elements. Because it's out of the normal flow, it collapses to 0px height since it has nothing inside it actually taking up space.
See the below code. I've commented out the positioning code and just used margin: 0 auto to horizontally center the .Banner element
FYI: not related to your question but for the cursor you will want to change to that from position: absolute to position: fixed - otherwise when you scroll down the page the positioning will not match the actual cursor position.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const cursor = document.querySelector('.cursor')
const main = document.querySelector('.Main');
let cursorSize = 50;
document.addEventListener('mousemove', (event) => {
cursor.style.left = `${event.clientX - cursorSize / 2}px`;
cursor.style.top = `${event.clientY - cursorSize / 2}px`;
const isSelectable = event.target.tagName === 'P' || event.target.tagName === 'H2';
if (isSelectable) {
cursor.classList.add('hide'); // Hide the cursor when mouse is over text or text is selected
main.classList.add('cursor-text');
} else {
cursor.classList.remove('hide'); // Show the cursor when mouse is not over text and no text is selected
main.classList.remove('cursor-text');
}
});
document.addEventListener('mousedown', (event) => {
cursorSize = 20;
pointerStyle(event, cursorSize)
});
document.addEventListener('mouseup', (event) => {
cursorSize = 50;
pointerStyle(event, cursorSize)
});
let pointerStyle = (event, size) => {
let newX = event.clientX - size / 2;
let newY = event.clientY - size / 2;
cursor.style.width = `${size}px`;
cursor.style.height = `${size}px`;
cursor.style.left = `${newX}px`;
cursor.style.top = `${newY}px`;
}
<!-- language: lang-css -->
body {
font-family: 'Montserrat', sans-serif;
overflow-x: hidden;
width: 100%;
}
.Main{
cursor: none;
background-color: orange;
}
.cursor{
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: #84E6BC;
border-radius: 50%;
pointer-events: none;
}
.cursor.hide {
opacity: 0;
pointer-events: none;
}
.cursor-text {
cursor: text;
}
.banner {
/*position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
margin: 0 auto; /* <-- Added this to horizintally center this element*/
width: 60%;
height: 40%;
background-color: #FFFFFF;
border-radius: 60px;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 2em;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
.subheading {
font-size: var(--p-size);
text-align: center;
margin-bottom: 40px;
}
.smiley {
fill: #84E6BC;
}
<!-- language: lang-html -->
<div class="Main">
<div class="banner">
<h2 class="title">Thank you!</h2>
<p class="subheading">I really appreciate you contacting me. I will be in touch shortly.</p>
<svg class="smiley" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
</svg>
</div>
<div class="cursor"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论