Question

我必须在这个问题的前言，我是一个相对年轻和新的开发人员。

我有五点我试图将它们放在页面的特定区域。我知道有了这五点，我就可以创建五个特定的类，然后将每个点放在我想要的位置。但是我知道使用那种方法，它不是很干。因此，我尝试合并一个类，并且有五个ID与同一个类相关联，以便稍微缩短代码。然而，我遇到了这样的问题，因为我无法将这些点定位到我希望它们的位置。

我的问题是，是否可以合并许多ID并让它们与课程相关联？如果是这样，那怎么办呢？

这是我正在使用的代码。这些点最终彼此并排，而不是在我希望它们的位置。如果有几个人可以采取措施，我会非常感激。非常感谢提前。

<div class = "box container">
<div class = "circle" id = "circle1"></div> 
<div class = "circle" id = "circle2"></div>
<div class = "circle" id = "circle3"></div>
<div class = "circle" id = "circle4"></div>
<div class = "circle" id = "circle5"></div>
</div>

.circle {
width: 20px;
height: 20px;
background: red;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 50;
display: inline-block;
}


 #circle1{
left: 10em;
margin-top: 10em;
}

 #circle2{
left: 20em;
margin-top: 20em;
}

#circle3{
left: 30em;
top: 30em;
}

#circle4{
left: 40em;
top: 40em;
} 

#circle5{
left: 50em;
top: 50em;
}

Answer 1

您的left和top值无效，因为您未向.circle班级提供position。

默认情况下，所有元素都有position: static;。静态元素不能与顶部，底部，左侧或右侧

定位

将此添加到.circle：

position: relative;

示例：

.circle {
    width: 20px;
    height: 20px;
    background: red;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    z-index: 50;
    display: block;
    position:relative;
}


 #circle1{
    left: 10em;
    margin-top: 10em;
}

 #circle2{
    left: 20em;
    margin-top: 20em;
}

#circle3{
    left: 30em;
    top: 30em;
}

#circle4{
    left: 40em;
    top: 40em;
} 

#circle5{
    left: 50em;
    top: 50em;
}

<div class = "box container">
    <div class = "circle" id = "circle1"></div> 
    <div class = "circle" id = "circle2"></div>
    <div class = "circle" id = "circle3"></div>
    <div class = "circle" id = "circle4"></div>
    <div class = "circle" id = "circle5"></div>
</div>

另外，我不建议在这里使用id。它们阻止您在同一文档中的其他位置使用这些样式。您可以轻松地为所有元素使用类。见下文......

实施例

.circle {
    width: 20px;
    height: 20px;
    background: red;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    z-index: 50;
    display: block;
    position:relative;
}


.circle1{
    left: 10em;
    margin-top: 10em;
}

.circle2{
    left: 20em;
    margin-top: 20em;
}

.circle3{
    left: 30em;
    top: 30em;
}

.circle4{
    left: 40em;
    top: 40em;
} 

.circle5{
    left: 50em;
    top: 50em;
}

<div class = "box container">
    <div class="circle circle1"></div> 
    <div class="circle circle2"></div>
    <div class="circle circle3"></div>
    <div class="circle circle4"></div>
    <div class="circle circle5"></div>
</div>

Answer 2

嗯我不确定我是否明白，但是你是否尝试将.circle {position：fixed;}添加到你的CSS中？

使用类和ID

2 个答案: