使用类和 ID

Question

我必须先回答这个问题，我是一个相对年轻的新开发人员。

我有五个要点，我试图将它们放在页面周围的特定区域。我知道用这五个点我可以创建五个特定的 classes，然后将每个点定位到我想要的位置。但是我知道用那种方法，它不是很干。因此，我尝试合并一个 class，并让五个 ID 与同一个 class 相关联，以便稍微缩短代码。但是我运行以这种方式解决问题，因为我无法将这些点定位到我希望它们所在的位置。

我的问题是，是否可以合并多个 ID 并将它们与 class 相关联？如果是这样，那将如何完成？

这是我正在使用的代码。这些点最终并排在一起，而不是在我希望它们所在的位置。如果有几个人能看一眼，我将不胜感激。非常感谢。

<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 class position。

默认所有元素都有position: static;。静态元素不能用top, bottom, left, right

定位

将此添加到 .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。它们会阻止您在同一文档的其他地方使用这些样式。您可以轻松地对所有元素使用 classes。见下文...

示例。

.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

working with classes and ids

html

css

frontend

class

使用 类 和 ID

working with classes and ids

html

css

frontend

class

使用类和 ID