Pouvez-vous réinitialiser un élément CSS pour faire référence au zéro absolu dans un élément relatif

Question

Il s'agit d'un problème plutôt aléatoire. J'utilise CSS3Pie pour gérer la compatibilité CSS3 dans IE, mais j'ai rencontré un problème. Avec PIE dans beaucoup de cas vous devez utiliser la position: relative pour que cela fonctionne correctement dans IE.

Cela devient un problème lorsque je l'utilise sur des enveloppes contenant, car il se déplace dans la référence zéro à l'intérieur de la mise en page. Le logiciel que nous utilisons pour le mappage sur nos sites utilise une position absolue du coin supérieur gauche du navigateur comme point de référence pour le calcul du positionnement. Idéalement, notre logiciel serait plus flexible et ne dépendrait pas d'une position absolue comme celle-ci, mais cela ne changera probablement pas de sitôt. Pour en venir à ma question, est-il possible de retirer un élément du flux de la mise en page et de revenir à la position 0,0 en haut à gauche tout en étant contenu dans un objet relativement positionné? Je pensais que peut-être z-index pourrait fonctionner, mais cela ne fait pas revenir l'élément à 0,0. La solution de contournement la plus simple consiste à ne pas appliquer PIE à mes wrappers, mais cela supprime également les coins arrondis et les ombres portées de mon wrapper de mise en page. Ce n'est pas la fin du monde, mais idéalement, j'aimerais trouver une solution.

Answer 1

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

Ceci est un peu d'amélioration du Code de Wilson page. Testé jusqu'ici seulement sur localhost, mais il a fait l'affaire. Testé avec IE6/7/8 + CSS3PIE activé.

Je voulais mettre cela sur le serveur web public, mais il s'avère qu'ils n'ont pas activé le support *.htc, et lors de l'utilisation avec PIE.php (le script fourni avec PIE) - cela n'a pas fonctionné.

J'effectuerai d'autres tests plus tard lorsque je serai de retour au bureau et commencerai à pousser les administrateurs système pour activer le support *.htc sur le serveur. hehe

Et, je suis entièrement testé le script de Sebastian Patane Masue, il a fait le travail! +1 @Sebastian.

P.S. Avec plein je veux dire avec CSS3PIE activé et les propriétés ajoutées au style réel.

EDIT: Je viens de donner un essai de plus, et les résultats sont plutôt ennuyeux. Il fonctionne parfaitement sur localhost, mais il est assez buggé lors de la visualisation à distance. Je n'ai aucune idée de ce qui cause ...

Answer 2

Je pense que JS/jQuery est nécessaire pour cela:

essayer quelque chose comme:

var el = $('#element'); 

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

Hope this est une solution acceptable,

W.

Answer 3

Grande Question: i pense que cela pourrait être impossible sans js.

ceci est une solution de contournement jQuery: http://jsfiddle.net/SebastianPataneMasuelli/hSh25/

il prend les valeurs gauche et en haut de l'élément en position relative et les soustrait de celui absolu, en effet returing l'une absolue du point d'origine.

donc, étant donné

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

ce calcule comment revenir à 0 avant d'ajouter les valeurs de gauche et de haut pour la div positionné.

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

vous devrez être plus précis dans votre site actuel (j'imagine qu'il ya un tas de là divs position relative) Veuillez me faire savoir si sa une solution viable pour CSS3PIE, comme je l'intention de l'utiliser moi-même dans un projet bientôt.

note: Javascript n'est pas mon point fort, je soupçonne qu'il y a une façon plus élégante d'écrire l'énoncé ci-dessus.