我有以下的div元素FirstDiv與內嵌樣式設置：如何讓一個元素的「頂部」位置等於另一個+ 60px的位置？
<div class="FirstDiv" style="position:absolute;top:16%;height:50%; width:24%;</div>
當按下一個按鈕，我使用toggleClass添加SecondDiv到FirstDiv，使頂部由20像素下移。以下是我嘗試使用CSS & JQuery組合的（不成功的）JQuery。 （我甚至不知道你是否可以合併CSS/jQuery的這種方式。）
<style type="text/javascript">
.`SecondDiv`{
top:($(".FirstDiv").position().top + '20px') !important;
}
</style>
我也代替.position()試圖.offset().但這並不工作。
好像你正在嘗試使用jQuery的樣式表內，這不是它很是如何工作的。您需要編寫一個JavaScript腳本來修改html元素以使其移動。 jQuery將選擇元素：
$(".special")
然後您可以切換一類是使用toggleClass("move")。這會在課程缺失的情況下添加該課程，或者如果它存在，則將其刪除。
您可以通過切換重新定義元素的top屬性的類來達到所需的效果。可以通過使用calc(...)來加入或減去20px。
參見：
$(document).ready(function(){
$("#moveButton").click(function(){
$(".special").toggleClass("move");
});
});.special{
position: absolute;
background-color: lightblue;
padding: 3px;
top: 20%;
left: 20px;
}
.move{
top: calc(20% + 20px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="special">
I am special!
</div>
<button id="moveButton" type="button">Move Special</button>'top：calc（20％ - 20px）;'正是我所需要的！我第一次嘗試''20％ - 20px'沒有Calc（）'非常感謝！ – Snoops
給SecondDivs一個負頂部邊距怎麼樣？
<div class="FirstDiv" style="position:absolute;top:16%;height:50%; width:24%;"></div>
<div class="SecondDiv" style="position:absolute;top:16%;height:50%; width:24%; margin-top: -20px;"></div>
老實說，我只是一直在這樣做了幾年，但我從來沒有見過的jQuery，看起來像你分享的內容：在的jQuery /具體來說."SecondDiv"{}還有!important的一部分。好像你在以不聖潔的方式合併CSS和jQuery。
這並不是說你不能在正確的軌道上：
var newTop = $('.FirstDiv').offset().top + 20;
$('.SecondDiv').css({ top: newTop + 'px' });
您還可以設置保證金是這樣的：
$('.SecondDiv').css({ 'margin-top' : newTop + 'px' });
Here is a working jsFiddle，希望這有助於。
在這兩個示例中單擊藍色div。
使用jQuery切換類，但是在這種情況下，在這兩個類（FirstDiv和SecondDiv）中都沒有特定的「16％」。在這種情況下，我們不使用「calc」。在這種情況下，我們有可能使用每個「top」，將參數傳遞給「changeTop」函數。
<!DOCTYPE html>
<html>
<head>
<style>
.FirstDiv {
position: absolute;
height: 50%;
width: 24%;
background: blue;
top: 16%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var changeTop = function (topIncrement) {
if (!$('.FirstDiv').data('originalTop')) {
var top = $('.FirstDiv').position().top;
$('.FirstDiv').data('originalTop', top)
}
var originalTop = parseFloat($('.FirstDiv').data('originalTop'));
var newTop;
if ($('.FirstDiv').hasClass('SecondDiv')) {
newTop = originalTop;
}
else {
newTop = originalTop + parseFloat(topIncrement);
}
$('.FirstDiv').toggleClass('SecondDiv').css('top', newTop);
}
</script>
</head>
<body>
<div class="FirstDiv" onclick="changeTop(20)"></div>
</body>
</html>這是唐的情況。使用jQuery切換類。在這種情況下，你必須在兩個類中都有特定的「16％」（FirstDiv和SecondDiv）。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.FirstDiv {
position: absolute;
height: 50%;
width: 24%;
background: blue;
top: 16%;
}
.SecondDiv {
top: calc(16% + 20px);
}
</style>
</head>
<body>
\t <div class="FirstDiv" onclick="$(this).toggleClass('SecondDiv')"></div>
</body>
</html>
jQuery是JavaScript的，而不是CSS。 –
@ThomasLandauer看看它的結構。它設置在'css'中。我會添加更多的細節來幫助你。 – Snoops
我在回答中添加了其他方法。 – Laurianti