得到偏移然后使位置絕對

Question

你好人們我需要的是得到任何部分的偏移然后使所有部分的位置是絕對的：所有部分以0px的偏移返回的問題

 $(document).ready(function () { $('section').each(function (index, element) { var $this = $(this); $this.css('top', $this.offset().top + 'px'); $this.css('position', 'absolute'); }); }) 

 section { width: 100%; height: 400px; background-color:#ff5b74; } .section-2{ height:500px; background-color:#00ff6b; } .section-3{ background-color:#5066e9; } .section-4{ background-color:#ff6a00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="section-1"></section> <section class="section-2"></section> <section class="section-3"></section> <section class="section-4"></section> 

Answer 1

問題是，對於每個部分，您設置絕對位置，使其在更改剩余部分之前使其脫離流程。 所以其余部分將忽略此部分占用的空間並填充它。

這就是為什么他們都采取相同的頂級位置

完成所有部分的頂部位置設置后，需要設置絕對位置，這意味着在循環功能之外。

 $(document).ready(function() { $('section').each(function(index, element) { var $this = $(this); $this.css('top', $this.offset().top + 'px'); }); $('section').css('position', 'absolute'); }) 

 section { width: 100%; height: 400px; background-color: #ff5b74; } .section-2 { height: 500px; background-color: #00ff6b; } .section-3 { background-color: #5066e9; } .section-4 { background-color: #ff6a00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="section-1"></section> <section class="section-2"></section> <section class="section-3"></section> <section class="section-4"></section> 

Answer 2

您遇到的問題是，只要您在each循環中並將第一個元素設置為position: absolute; 它將失去它的高度因為它是position: absolute; 或者那是什么position: absolute; 確實。 它需要元素流出。

相對定位的元素仍然被認為是文檔中正常的元素流。 相比之下，絕對定位的元件從流動中取出，因此在放置其他元件時不占用空間。 來自這里的信息

Sooo要完成你需要通過高度和前一個元素的位置設置高度。

$(this).prev().offset().top + $(this).prev().outerHeight()

如果你有興趣看到不同的值，我就離開了console.log() 。

 $(document).ready(function () { $('section').each(function (index, element) { // console.log( // $(this).offset().top, // $(this).outerHeight(), // ($(this).offset().top + $(this).outerHeight()), // ($(this).prev().offset().top + $(this).prev().outerHeight()) // ); $(this).css('top', $(this).prev().offset().top + $(this).prev().outerHeight() + 'px'); $(this).css('position', 'absolute'); }); }) 

 section { width: 100%; height: 400px; background-color:#ff5b74; } .section-2{ height:500px; background-color:#00ff6b; } .section-3{ background-color:#5066e9; } .section-4{ background-color:#ff6a00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="section-1"></section> <section class="section-2"></section> <section class="section-3"></section> <section class="section-4"></section> 

Answer 3

<style>
    section {
        width: 100%;
        height: 400px;
        background-color:#ff5b74;
    }
    .section-2{
        height:500px;
        background-color:#00ff6b;
    }
    .section-3{
        background-color:#5066e9;
    }
    .section-4{
        background-color:#ff6a00;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

<script>
    $(document).ready(function () {
        $('section').each(function (index, element) {
            var $this = $(this);

            if (index != 0) {

                $this.css('top', (Number($this.offset().top)+Number($('.section-'+(Number(index)+1)).height())) + 'px');
            }
            $this.css('position', 'absolute');
        });
    })

</script>