Question

Hello People 我需要的是获取任何部分的偏移然后使所有部分的位置是绝对的：所有部分以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

问题在于，对于每个部分，您设置绝对位置，使其在更改剩余部分之前使其脱离流程。因此剩下的部分将忽略此部分占用的空间并填充它。

这就是为什么他们都采取同样的最高职位

在完成所有部分的顶部位置设置后，您需要设置绝对位置，这意味着在循环函数之外。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您面临的问题是，只要您处于each循环并将第一个元素设置为position: absolute;，它就会失去它的高度，因为它是position: absolute;或者那就是{ {1}}。它需要元素流出。

相对定位的元素仍然被认为是在文档中元素的正常流动。 相反，一个元素绝对定位的是从流程中取出并因此占用放置其他元素时没有空间。 Information from here here

Sooo要完成你需要通过高度和前一个元素的位置来设置高度。

position: absolute;

如果您有兴趣看到不同的值，我会将$(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;
}

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>

得到偏移然后使位置绝对

3 个答案: