Javascript 将一个div动态定位在另一个div的下方？_Javascript_Jquery_Html_Css

Javascript 将一个div动态定位在另一个div的下方？

javascript jquery html css

Javascript 将一个div动态定位在另一个div的下方？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我尝试使用jQuery来检测一个div（.field_slide-produit）的位置，因此我可以使用该位置将另一个div（.slider content）放置在左下角它的正下方，我需要在调整窗口大小时动态替换这个div <head> <title></title> </head> <style type="text/css"> .field_slide-produit { width: 800px; height: 30

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

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

我用过这个代码，但它不起作用，为什么

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

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

此代码位于此处的代码笔中：

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

谢谢

您在那里包括jquery文件了吗

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

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

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

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

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


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

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

.field_滑触式生产线{
宽度：800px；
高度：300px；
背景颜色：蓝色；
}
.滑块内容{
宽度：200px；
高度：200px；
背景色：红色；
}
变量偏移量=$（'.field_slide-produit'）.offset（）；
变量高度=$（'.field_slide-produit'）.height（）；
变量宽度=$（'.field_slide-produit'）.width（）；
var slider_height=$（'.slider content'）.height（）；
var slider_width=$（'.slider content'）.width（）；
var new_top=编号（高度-（offset.top+滑块_高度））+“px”；
var new_left=（offset.left+offset.left）+“px”；
函数slidercontent（）{
$（'.slider content'）.css({
'位置'：'绝对'，
"左":新左,，
“顶部”：新的顶部
});
}
幻灯片内容（）；
//收听窗口更改并更正滑块内容div位置
$（窗口）。调整大小（函数（）{
幻灯片内容（）；
});

您也只能通过css来完成您的工作

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

您可以添加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>


.field_滑触式生产线{
宽度：800px；
高度：300px；
背景颜色：蓝色；
}
.滑块内容{
宽度：200px；
高度：200px；
背景色：红色；
}
.主集装箱{
位置：相对位置；
}
.移动{
位置：绝对位置；
底部：10px；
左：10px；
}

调用函数

slider-content（）但没有调用该函数。将代码放入该函数中，使其工作。此外，在您的笔中，您没有包含jquery，因此无法工作。这是期望的结果吗？不，我需要左下角蓝色框上的红色框更新@LaurentSorry你能帮我修改代码笔吗