Элемент позиционирования относительно другого не работает

Я пытаюсь поместить элемент относительно другого с помощью метода jQuery offset(), и я пытаюсь выяснить, почему функция $(window).resize не работает.Элемент позиционирования относительно другого не работает

JSBIN: http://jsbin.com/lanako/7/edit?html,js,output

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<style> 


div{ 
display:inline-block; 
position:relative; 
height:200px; 
width:200px; 
border:solid black;  
} 

#somepara{ 
border: solid blue; 
position:relative; 
left:20%; 
} 

</style> 
<body> 
    <div id ="first"> FIRST</div> 

    <div id = 'somepara'> </div> 


</body> 
</html>

JavaScript:

var p = $("#somepara"); 
var pf = $('#first'); 
var offset = p.offset(); 
p.html("left: " + offset.left); 

function offcss(){ 
pf.css({'left': offset.left + 6 + "px"}); 
} 

$(document).ready(function(){ 
    offcss(); 
    $(window).resize(function(){ 
     offcss(); 
    }); 


});

Я по существу захватывая offset().left второго элемента ('#somepara') и пытается установить CSS в ('#first') правой 6 пикселей от (#somepara) ОТМЕТЬТЕ: (#somepara) имеет измерение текучести (%), поэтому левое положение изменяется.

Уравнение изначально работает, но я хочу, чтобы изменить размер браузера, для уравнения pf.css(), которое вычисляет свойство css left (#first) для выполнения. К сожалению, функция $(window).resize, которую я установил, не работает, и, таким образом, свойство left (#first) не изменилось. Конечная цель, которую я хочу, независимо от размера браузера, элементы будут разделены на 6 пикселей (#first справа 6 пикселей от #somepara).

Любая помощь была бы принята с благодарностью!

источник

2016-09-22 the12

При изменении размера изменяется #somepara, поэтому при каждом использовании функции offcss() вы должны принимать значение p.offset() (и не только при первой загрузке).

function offcss() { 
    pf.css({'left': p.offset().left + 6 + "px"}); 
}

Что касается изменения размера, похоже, он делает именно то, что вы хотите.

Проверить этот пример:
http://jsbin.com/dewazuyuqo/1/edit?html,js,output

источник

2016-09-22 22:24:10 Dekel

Спасибо! Не возражаете ли вы объяснить, почему это работает, а у меня нет? Смещение переменной заменено p.offset(), в противном случае оно было точно таким же ... – the12

Ваше 'смещение' является фиксированным значением, в то время как в моем решении я получаю« текущее »значение, используя вызов' p.offset() '(который изменяется при каждом изменении ширины окна). – Dekel

Элемент позиционирования относительно другого не работает

ответ

Смежные вопросы