如何使z-index适合页面而不调用

How to make a z-index fit to page and not scalling

本文关键字：调用 何使 z-index      更新时间：2023-09-26

如何使z-index适合页面，而不是调用我需要把它从svg，但我的svg是适合页面。

这里是div代码

<div   id="homeScreen" class="grey_box"  style="background-color:#CDCDCD;
    position: absolute;
    left: 0px;
    top: 8px;
    width: 373px;
    height: 537px;
    visibility: visible;">
 <p class="hello" >E-Number<input id="tags" /></p>
<p class="hello2">Mat-Number<input id="tags1" /><p>
<p class="hello3">Tech. ID<input type="text"  name="fname"><p>
<p class="hello4">RIS<input type="text"  name="fname"><p>
<p class="hello5"> <button onclick="get_action_home()" style="width: 100px">Continue</button><p>
<p class="hello6">Βάση δεδομένων: Τοπικός</p> 
<p class="hello7">Σύνδεση: κομμένη</p> 
<p class="hello8">Κατάσταση βάσης δεδ.: Μη επίκαιρη</p> 
</div>

这里是javascript动态地放置它

function adjust()
{
            var DMMScreen = document.getElementById("DMM");
            //new screens dinamic 
            var homeScreen = document.getElementById("homeScreen");

            homeScreen.style.height = DMMScreen.getBoundingClientRect().height;
            homeScreen.style.width = DMMScreen.getBoundingClientRect().width;
            homeScreen.style.top = DMMScreen.getBoundingClientRect().top;
            homeScreen.style.left = DMMScreen.getBoundingClientRect().left;
            //

这是我从jquery中发现的但是我不知道如何修复它

$(window).resize(function() {
    $("#width").text($(this).width());
    $("#height").text($(this).height());
});

，这里是它的功能链接[链接](https://www.dropbox.com/s/ebsha1t091ewk40/good2.png)和这是我换窗户时的坏情况[链接](https://www.dropbox.com/s/b7n4nn3gg2gb6fn/good.png)

z-index不适合任何东西，它是一个"分层"工具，允许您将元素放在彼此的顶部，我认为您的意思是您有position:fixed或position:absolute与z-index结合…如果是这种情况，你可以使用width:100%;

使元素适合页面宽度例如:

<style>
.full_width {
    top:0;
    left:0;
    z-index:1;
    height:20%;
    width:100%;
    position:fixed;
    text-align:center;
}
</style>
</head>
<body>
    <div class="full_width"> i will fit the width of the page</div>
    your other stuff here...
</body>

如果这不是你的意思，那么请提供更多的信息。

编辑您提供的链接，您不需要使用position或z-index，

将margin-left和margin-right设置为auto并将容器定义为width ..

粘贴HTML &我们可以给你更多的帮助

但是就目前而言，在页面中间放置这个框的一个例子是

<style>
.grey_box {
    width:500px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    background-color:#CCC;
}
</style>
<div class="grey_box">
 <!-- your content here-->
</div>

示例:http://jsfiddle.net/AbQsa/

相关文章：