CSS将img带到了前面

时间：2015-06-05 00:40:14

标签： html css position

我在将图像重新放回前面时遇到了一些麻烦。

所以基本上这是我的代码段：

>>> req.add_header('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8')
>>> data = urllib2.urlopen(req, timeout=6).read()
>>> print data
<!DOCTYPE html>
    <!--[if IE 8]>
        <html xmlns="http://www.w3.org/1999/xhtml" class="ie8" lang="en-US">
    <![endif]-->
    <!--[if !(IE 8) ]><!-->
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
    <!--<![endif]-->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>K SEE K architect &rsaquo; Log In</title>
    <link rel='stylesheet' id='buttons-css'  href='http://kseek.com.my/wp-includes/css/buttons.min.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='open-sans-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&#038;subset=latin%2Clatin-ext&#038;ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css'  href='http://kseek.com.my/wp-includes/css/dashicons.min.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='login-css'  href='http://kseek.com.my/wp-admin/css/login.min.css?ver=4.2.2' type='text/css' media='all' />
<link rel="apple-touch-icon" sizes="57x57" href="/wp-content/uploads/fbrfg/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/wp-content/uploads/fbrfg/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/wp-content/uploads/fbrfg/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/wp-content/uploads/fbrfg/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/wp-content/uploads/fbrfg/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/wp-content/uploads/fbrfg/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/wp-content/uploads/fbrfg/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/wp-content/uploads/fbrfg/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/fbrfg/apple-touch-icon-180x180.png">
<link rel="shortcut icon" href="/wp-content/uploads/fbrfg/favicon.ico">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/wp-content/uploads/fbrfg/mstile-144x144.png">
<meta name="msapplication-config" content="/wp-content/uploads/fbrfg/browserconfig.xml"><meta name='robots' content='noindex,follow' />
    </head>
    <body class="login login-action-login wp-core-ui  locale-en-us">
    <div id="login">
        <h1><a href="https://wordpress.org/" title="Powered by WordPress" tabindex="-1">K SEE K architect</a></h1>

<form name="loginform" id="loginform" action="http://kseek.com.my/wp-login.php" method="post">
    <p>
        <label for="user_login">Username<br />
        <input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
    </p>
    <p>
        <label for="user_pass">Password<br />
        <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
    </p>
        <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> Remember Me</label></p>
    <p class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />
        <input type="hidden" name="redirect_to" value="http://kseek.com.my/wp-admin/" />
        <input type="hidden" name="testcookie" value="1" />
    </p>
</form>

<p id="nav">
    <a href="http://kseek.com.my/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a>
</p>

<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}

wp_attempt_focus();
if(typeof wpOnload=='function')wpOnload();
</script>

    <p id="backtoblog"><a href="http://kseek.com.my/" title="Are you lost?">&larr; Back to K SEE K architect</a></p>

    </div>


        <div class="clear"></div>
    </body>
    </html>

>>>

链接<itemimg> <a href="images/table1.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1.jpg" /></a> <a href="images/table1-side.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1-side.jpg"></a> </itemimg> table1.jpg a href table1.jpg`的第二个table1-side.jpg is overlapping the应位于首位。

影响这部分的css在这里：

but i want it the other way around.

我试过（如你所见），用itemimg { display: block; width: 200px; height: 200px; } itemimg img:nth-child(1) { z-index: 9999; } itemimg img:nth-child(2) { z-index: 0; } itemimg img { position: absolute; border-top-left-radius: 5px; border-top-right-radius: 5px; width: 200px; height: 200px; } itemimg a { display: block; position: absolute; cursor: zoom-in; } 将第二张图片发送到后面，但它没有这样做。我甚至试图弄乱z-index上的position属性，看它是否会重新安排它们。我甚至在HTML中切换它们，所以一个在顶部， 工作但是我正在使用Lightbox，当我将HTML安排到itemimg img的位置时在顶部，Lightbox中的导航是向后的（因为我必须按向左箭头向后而不是向前看图像）。 ＆lt; - 我知道这可能会令人困惑，但请亲自看看here。点击表格调出Lightbox，你必须在幻灯片中向前导航而不是前进，这是我不想要的。所以我想我是否能得到table1.jpg  最重要的是，它会像我想要的那样前进，这就是我遇到的麻烦。

真的需要帮助，提前谢谢！

SOLUTION：

对于想要了解解决方案的人。根据您的情况，以下答案非常有用。我想避免使用内联css和类，所以我将我的图像实现为table1.jpg并将第二个ul li设置为z-index ：

HTML 

-1

CSS 

<itemimg>
    <ul>
        <li><a href="images/table1.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1.jpg" /></a></li>
        <li><a href="images/table1-side.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1-side.jpg" /></a></li>
    </ul>
</itemimg>

我的网站已更新，最终结果为go and take a look!

2 个答案:

答案 0 :(得分：1)

问题在于第二个z指数。将它设为-1，如下所示：

itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg img:nth-child(1) {
z-index: 9999;
}
itemimg img:nth-child(2) {
z-index: -1; //make this -1
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: absolute;
cursor: zoom-in;
}

答案 1 :(得分：1)

两张图片的z-index均为9999。

解决方案1：

HTML中的其中一个硬编码。

#include <stdlib.h>
#include <stdio.h>

char name;
char* buffer;
int buffer_size = 16;
int i = 0;


void HUD()
{
        printf("%s ", buffer);
}

int main(void)
{
        buffer = malloc(buffer_size);
        if(!buffer) return;

        for(;;) {
                name = getchar();
                if(name < 0) {
                        buffer[i] = '\0';
                        goto finish;
                } else if(i < (buffer_size -1)) {
                        buffer[i++] = name;
                } else if(name == '\n') {
                        break;
                }
        }
        buffer[i] = '\0';
        finish:
            HUD();
            free(buffer);
            return 0;
}

解决方案2：

给前面的图像一个id并命名为＆＃34; frontImage＆＃34;然后添加

<itemimg>
<a href="images/table1.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1.jpg" style="z-index:10000"/></a>
<a href="images/table1-side.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1-side.jpg"></a>
相关问题
最新问题