La couche contextuelle js est toujours centrée sur les idées et le code d'implémentation

Auteur：Eve Cole Date de mise à jour：2025-03-03 01:32:01

La fenêtre pop-up est toujours centrée

Copiez le code comme suit :

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=fonction(){

si(estIE){

window.onscroll=doIE;

window.onresize=doIE }

fonction doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var hauteur=document.documentElement.clientHeight;

var oDiv=document.getElementById("oneReply");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px' </script>

Tout d'abord, tout le monde doit comprendre une position de style CSS incompatible :fixed;

L'attribut Position a quatre valeurs facultatives : statique, absolue, fixe, relative.

Apprenons ensemble leurs différentes utilisations. Au cours de l'étude, nous devons réfléchir à lequel d'entre eux doit être utilisé dans quelle situation d'aménagement.

position:static Pas de positionnement Cette valeur d'attribut est le positionnement par défaut de tous les éléments. Dans des circonstances normales, nous n'avons pas besoin de la déclarer spécifiquement, mais parfois, en cas d'héritage, nous ne voulons pas voir l'impact des attributs hérités par l'élément. . lui-même, vous pouvez donc utiliser position:static pour annuler l'héritage, c'est-à-dire restaurer la valeur par défaut du positionnement des éléments. Par exemple : #nav { position:static; } Les deux autres mentionnés précédemment, nous parlons principalement de position fixe : fixe Que signifie la valeur de l'attribut de positionnement par rapport au positionnement fixe de la fenêtre ? L'élément est positionné de la même manière que l'absolu, mais son bloc conteneur est la fenêtre elle-même. Dans les médias d'écran tels que les navigateurs Web, les éléments ne se déplacent pas dans la vue du navigateur lorsque le document défile. Par exemple, il permet une disposition de style cadre. Dans les médias de page tels que les impressions, un élément fixe apparaît à la même position sur la première page. Cela peut être utilisé pour générer des titres ou des notes de bas de page fluides. Nous avons vu des effets similaires, mais la plupart d’entre eux ne sont pas obtenus via CSS, mais à l’aide de scripts JS. Veuillez noter qu'IE6 ne prend pas en charge...

Ici, nous utilisons position:fixed; + "hack technology" + "javascript" pour résoudre ce problème.

Copiez le code comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">

<tête>

< méta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ingénieur front-end Tusheng</title>

< style type="text/css">

corps,div{marge:0; remplissage:0;}

#a{width:200px;height:200px;background:blue;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;_position:absolute;}

</ /style>

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=fonction(){

si(estIE){

window.onscroll=doIE;

window.onresize=doIE }

fonction doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var hauteur=document.documentElement.clientHeight;

var oDiv=document.getElementById("a");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';< /script>

</tête>

<corps>

< /corps>

< /html>