css定位问题,css 定位问题

html>

亲，您好！

登录

*{

padding: 0;

margin: 0;

}

.box{

width: 300px;

height: 180px;

background: #CCCCCC;

position: absolute;

left: 50%;

right: 50%;

top:50%;

bottom: 50%;

margin-top: -90px;

margin-left: -150px;

border: 1px solid #777777;

}

.pn{

height: 1.5em;

line-height: 1.5em;

border-bottom: 1px solid #777777;

}

.sn{

position: absolute;

right: 4px;

cursor: pointer;

}window.onload=function(){

aa()

}

var i=-1;

function xxx(){

//  if(){}

var div=document.createElement('div'),

p=document.createElement('p'),

span=document.createElement('span');

p.innerHTML='用户登录';p.id='pid';p.className='pn'

span.innerText='X';span.className='sn';

div;div.className='box';

div.appendChild(p);

div.appendChild(span);

document.body.appendChild(div);

bb()

}

function yyy(){

var dd=document.getElementsByTagName('div')[i];

dd.style.display='none';

i++;

}

function aa(){

var btn=document.getElementById('btn');

if(addEventListener){

btn.addEventListener('click',xxx,false);

}else if(attachEvent){

btn.attachEvent('onclick',xxx);

}else{

btn.onclick=xxx;

}

i++;

}

function bb(){

var x=document.getElementsByTagName('span')[i];

x.onclick=yyy;

}

ccs 中 .sn是相对与 .box进行绝对定位 为什么位置会在p标签的下方

js中bug 怎么改 能做到html和js分离又没问题