css 定位问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <link rel="stylesheet" type="text/css" href="css/10.css"/>
        <script src="js/10.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <p>亲，您好！</p>
        <button id='btn'>登录</button>
    </body>
</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分离又没问题

慕小猿

浏览 1659回答 4

css 定位问题

4回答