javascript - 标签在选择其他时向上移动

Question

我有一个 jsfiddle: http://jsfiddle.net/aritro33/y6wBy/

当您点击此 jsfiddle 上的撰写按钮时，一个帖子会掉下来，显示其上方的各种颜色。请注意，当您单击中间的一种颜色或任何颜色时，该颜色左侧的所有颜色都会稍微向上移动，从而产生一种奇怪的效果。怎么可能阻止所选 div 左侧的所有颜色向上移动并实际上将它们保持在原处。

谢谢!

HTML:

<div id="red" class = "color"></div>
<div id="orange" class = "color"></div>
<div id="yellow" class = "color"></div>
<div id="green" class = "color"></div>
<div id="turquoise" class = "color"></div>
<div id="blue" class = "color"></div>
<div id="purple" class = "color"></div>
<div id="gray" class = "color"></div>

CSS:

#red {

     background-color: #2ac0a3;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     position: relative;
     bottom: 220px;
     left: 365px;
 }
 #orange {
     background-color: #25ac92;
     position:relative;
     bottom:236px;
     left: 405px;
 }
 #yellow {
     position: relative;
     bottom: 252px;
     left: 445px;
     background-color:#219982;
 }
 #green {
     position: relative;
     left: 485px;
     bottom: 268px;
     background-color: #1d8672;
 }
 #turquoise {
     position: relative;
     left: 525px;
     bottom: 284px;
     background-color: #197361;
 }
 #blue {
     position: relative;
     left: 565px;
     bottom: 300px;
     background-color: #156051;
 }
 #purple {
     position: relative;
     left: 605px;
     bottom: 316px;
     background-color: #104c41;
 }
 #gray {
     height: 16px;
     width: 40px;
     position: relative;
     left: 645px;
     bottom: 332px;
     background-color: #0c3930;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
 }

.active{
     height: 18px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

JS:

$('.color').click(function(){ $('.active').removeClass('active'); $(this).addClass('active'); });

Answer 1

您的 #active 属性会更改颜色的大小:

.active{
    height: 18px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

如果你把它改成这样:

.active{
    height: 14px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

效果似乎消失了。