Question

我尝试使用jQuery来检测div的位置（.field_slide-produit），所以我可以使用该位置在左下方的正下方放置另一个div（.slider-content）并且我需要替换这个div动态地在窗口调整大小。

我已经使用过此代码，但它无法正常工作，为什么会这样？

var offset = $('.field_slide-produit').offset();
var height = $('.field_slide-produit').height();
var width = $('.field_slide-produit').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$('.slider-content').css( {
'position': 'absolute',
'right': right,
'top': top
});

// listen the window changes and correct the newdiv position
$(window).resize(function(){ slider-content(); });

此代码位于codepen中：http://codepen.io/Laurentfrom47/pen/wJEKVb

由于

Answer 1

你在那里包含了jquery文件吗？

同样在调整窗口大小时，slider-content（）函数正在调用，但未定义

function slider-content(){
$('.slider-content').css( {
'position': 'absolute',
'right': right,
'top': top
});
}

检查这些点，您将得到预期的结果

Answer 2

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title></title>
  <style type="text/css">
  .field_slide-produit {
    width: 800px;
    height: 300px;
    background-color: blue;
  }

  .slider-content {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  </style>
</head>

<body>
  <div class="field_slide-produit"></div>
  <div class="slider-content">
  </div>
  <script>
  var offset = $('.field_slide-produit').offset();
  var height = $('.field_slide-produit').height();
  var width = $('.field_slide-produit').width();

  var slider_height = $('.slider-content').height();
  var slider_width = $('.slider-content').width();

  var new_top = Number(height - (offset.top + slider_height) ) + "px";
  var new_left = (offset.left + offset.left) + "px";
  function slidercontent() {
    $('.slider-content').css({
      'position': 'absolute',
      'left': new_left,
      'top': new_top
    });
  }
  slidercontent();
  // listen the window changes and correct the slider-content div position
  $(window).resize(function() {
    slidercontent();
  });
  </script>
</body>

</html>

Answer 3

你也可以通过css来完成你的工作

您可以添加moveit类及其绝对值，因此调整大小将正常工作

<head>
  <title></title>
</head>
<style type="text/css">
.field_slide-produit {
  width: 800px;
  height: 300px;
  background-color: blue;
}

.slider-content {
  width: 200px;
  height: 200px;
  background-color: red;
}
.main_container{
    position: relative;
}
.moveit{
      position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>

<body>
<div class="main_container">
  <div class="field_slide-produit">
  </div>
  <div class="slider-content moveit">
  </div>

</div>
</body>

</html>

将div动态定位在另一个下面？

3 个答案: