如何使所有位置屬性相同？

Question

我使用JavaScript創建了拖放引擎，目前正在添加“邊界”功能。 我的問題是邊界元素的位置根據其父元素的position:屬性而變化。

換句話說，這個html：

<div id="center" class="bound">
    <h1>Hello World! <hr /></h1>
    <div id="box" class="bound">
        <p class="drag square" id="one"> One </p>
        <p class="drag square" id="two"> Two </p>
    </div>
</div>

和這個HTML：

<div id="center"> <!-- Difference is here -->
    <h1>Hello World! <hr /></h1>
    <div id="box" class="bound">
        <p class="drag square" id="one"> One </p>
        <p class="drag square" id="two"> Two </p>
    </div>
</div>

以不同的方式影響引擎，但不應該這樣。 僅<div id="box" class="bound">應該會影響拖動對象。

這是CSS：

@charset "utf-8";
/* CSS Document */


* {
    padding: 0px;
    margin: 0px;
}    

.drag {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.bound {
    position: relative;
}

.square {
    width: 100px;
    height: 100px;
    background: red;
    cursor:move;
}

#center {
    width: 500px;
    height: 300px;
    margin: auto;
    margin-top: 50px;
    background-color:#ccc;
    text-align: center;
    border-radius: 25px;
    -moz-border-radius: 25px;
}

#box {
    background-color: #FF3;
    height: 278px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    opacity: 0.5;
}

如果有人要求設置邊界的JavaScript函數，我很樂意將其發布到編輯中！

為了使position屬性不影響我的JavaScript，我需要將所有內容轉換為絕對坐標嗎？ 我該怎么做？ 將所有內容轉換為絕對坐標是否可以使JavaScript以相同方式處理兩個html示例？

Answer 1

AFAIK，要拖放，元素必須具有position屬性為absolute或fixed 。

當然，當您更改position屬性時，其位置也會改變。