8

現在、Web サイトのフロント ページにフォームを作成しようとしています。ただし、入力ボックス内に入力できないという問題があります。絶対配置では、カーソルは表示されません。位置を絶対から相対に変更すると、この問題はなくなりました。残念ながら、これを行うと、他のすべての要素が下に移動します。タグが他の要素を下に移動させず、この入力ボックスに入力できるようにする方法はありますか?

HTML:

<div id="wrapper">
    <div class="header">
        <div id="head_login">
            Login
            <div id="arrow-down"></div>
        </div>
    </div>
    <div id="head_break"></div>
    <div class="content_splash">
        <form>
        **<input type="text" id="firstname" /></form>**
        <div id="vertical_one"></div>
        <div id="vertical_two"></div>
        <p id="OR"> OR </p>
        <div id="facebook_login"><img src="{% static 'home/facebook_login.gif' %}" /></div>
    </div>
    <div id="content_break"></div>
    <div class="content_description">
    <h2> What is the Title? </h2>
    </div>
    <div id="content_description_break"></div>
    <div class="content_howitworks">
    <h2> How it Works.</h2>
    </div>
    <div id="footer_break"></div>
</div>

CSS:

content_splash{
    position: relative;
    margin-top: 30px;
    height: 500px;
    border: 1px solid black;
}
.content_splash input{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

}
.content_splash #firstname{
    position: absolute;
    margin-top: 200px;
    width: 170px;
    height: 25px;
}
.content_splash #vertical_one{
    position: absolute;
    width: 1px; 
    height: 60px;
    margin-left: 310px;
    margin-top: 298px;
    background: black;
}
.content_splash #vertical_two{
    position: absolute;
    width: 1px; 
    height: 60px;
    margin-left: 310px;
    margin-top: 380px;
    background: black;
}
.content_splash #OR{
    position: absolute;
    padding-top: 346px;
    padding-left:300px;
    color: black;
}
.content_splash #facebook_login{
    position: absolute;
    padding-top: 350px;
    padding-left: 350px;

}
#content_break {
    margin-top: 20px;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#e2e3e4), to(#e2e3e4), color-stop(50%, black));  
}
.content_description{
    margin-top: 20px;
    height: 400px;
}
.content_description h2{
    font-size: 40px;
    font-family: Trebuchet MS;
    padding-left: 30px;
    color: #a2caf6;
}
#content_description_break {
    margin-top: 20px;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#e2e3e4), to(#e2e3e4), color-stop(50%, black));  
}
.content_howitworks{
    margin-top: 20px;
    height: 400px;
}
.content_howitworks h2{
    font-size: 40px;
    font-family: Trebuchet MS;
    padding-left: 30px;
    color: #a2caf6;
}
4

1 に答える 1

13

入力に ​​z インデックスを追加します。

.content_splash #firstname{
    position: absolute;
    margin-top: 200px;
    width: 170px;
    height: 25px;
    z-index: 1;
}

例

編集

@gaitat さんのリクエストに応じて、なぜこれが機能するのかを説明します。

次の HTML を想定します。

<div class="parent">
    I am the parent.

    <div class="child red">I am the red child.</div>

    <div class="child blue">I am the blue child.</div>

    <div class="child green">I am the green child.</div>
</div>

ここで、次の css も仮定します。

.parent
{
    position: relative;
}

.child
{
    position: absolute;
    padding: 5px;
}

.red
{
    background-color: red;
}

.blue
{
    background-color: blue;
}

.green
{
    background-color: green;
}

ここでJSFiddleを参照してください

ご覧のとおり、DOM では、緑色の子は親の最後の子であるため、最後にレンダリングされます。最後にレンダリングされた要素は、絶対位置と noz-indexが使用されていると仮定して、一番上にレンダリングされます。

ここで、赤い子に z-index を追加すると、次のようになります。

.red
{
    background-color: red;
    z-index: 1;
}

赤い子が一番上にレンダリングされることがわかります。これは、その z-index が、z-index が 0 (デフォルト) の他の子よりも高いためです。これを示す JSFiddle here を参照してください。

これは、同じ直接の親を共有する兄弟でのみ機能することに注意してください。それ以外の場合は機能しません。

于 2013-08-25T01:06:55.250 に答える