Можете ли вы сбросить элемент CSS для ссылки на абсолютный ноль в относительном элементе

Question

Это довольно случайная проблема. Я использую CSS3Pie для обработки совместимости CSS3 в IE, но я столкнулся с проблемой. С PIE во многих случаях вам нужно использовать position: относительный, чтобы он правильно работал в IE.

Это становится проблемой, когда я использую его на контейнерах, так как он перемещается в нулевой ссылке внутри макета. Программное обеспечение, которое мы используем для картирования на наших сайтах, использует абсолютную позицию верхнего левого угла браузера в качестве ориентира для расчета позиционирования. В идеале наше программное обеспечение должно быть более гибким и не зависеть от такой абсолютной позиции, но это, вероятно, не изменится в ближайшее время.

Итак, переходя к моему вопросу, возможно ли каким-то образом вынуть элемент из потока макета и вернуться к исходной 0,0 верхней левой позиции, находясь внутри относительно позиционированного объекта? Я подумал, что, возможно, z-index может сработать, но он не заставляет элемент возвращаться к абсолютному 0,0.

Самый простой обходной путь - не применять PIE к моим обёрткам, но это также удаляет закругленные углы и тени от моей обёртки макета. Это не конец света, но в идеале я хотел бы найти решение.

Answer 1

Отличный вопрос: я думаю, что это невозможно без js.

это обходной путь jQuery: http://jsfiddle.net/SebastianPataneMasuelli/hSh25/

он принимает левое и верхнее значения относительно позиционированного элемента и вычитаетони от абсолютного, фактически возвращая абсолютный к исходной точке.

так, учитывая

<div id="relative">
relative
  <div id="absolute">
     absolute;
 </div>

, это вычисляет, как вернуться к 0, прежде чем добавлять левое и верхнее значения для позиционированного div.

var relativeLeft = $('#relative').css('left');
var absoluteLeft =  $('#absolute').css('left');
var returnToOriginLeft = (parseInt(absoluteLeft) - parseInt(relativeLeft)) + 'px';
var relativeTop = $('#relative').css('top');
var absoluteTop =  $('#absolute').css('top');
var returnToOriginTop = (parseInt(absoluteTop) - parseInt(relativeTop)) + 'px';
$('#absolute').css('left', returnToOriginLeft);
$('#absolute').css('top', returnToOriginTop);

вам нужно будет конкретизировать свой реальный сайт (я думаю, что там есть куча относительно позиционированных элементов div). Пожалуйста, дайте мне знать, если это работоспособное решение для CSS3PIE, так как я планирую использовать его сам в проекте в ближайшее время..

примечание: Javascript не является моей сильной стороной, я подозреваю, что есть более элегантный способ написания приведенного выше утверждения.

Answer 2

Я думаю, для этого требуется JS / jQuery:

попробуйте что-то вроде:

var el = $('#element');

$('body').append(el);
el.remove();

Надеюсь, это приемлемое исправление,

W.

Answer 3

$(document).ready(function() {
    var el = $('#absolute'); // element we want to work with
    el.clone().appendTo('body'); // clone and append to body
    el.remove(); // remove element
});

Это небольшое улучшение кода Wilson Page . Протестировано пока только на localhost, но это сработало. Протестировано с IE6 / 7/8 + CSS3PIE включен.

Хотел поставить это на общедоступный веб-сервер, но оказалось, что они не включили поддержку *.htc, а при использовании его с PIE.php (скрипт, поставляемый с PIE) - он не работал. *

Я проведу еще несколько тестов позже, когда вернусь в офис и начну подталкивать системных администраторов, чтобы включить поддержку *.htc на сервере. хех

И, я полностью протестировал сценарий Себастьяна Патана Масу , он сделал свою работу! +1 @ Себастьян .

P.S. Я имею в виду полностью с включенным CSS3PIE и добавлением свойств к реальному стилю.

РЕДАКТИРОВАТЬ: Просто еще раз попробовать, и результаты довольно раздражающие. Он работает на локальном хосте без нареканий, но при прослушивании удаленного просмотра он довольно прослушивается. Понятия не имею, что является причиной этого ...