div kabının ayar yüksekliği div?

Bu çok garip. Dışında en çok "kap" olarak adlandırılan 3 divs içinde bir giriş düğmesi var. "Container" yüksekliğini ayarladığımda, "switch" ve "next" olarak adlandırılan girişleri tıklattığımda hiçbir eylem tetiklenmiyor. Ancak, #container için bir yükseklik ayarlamadığımda, tıklama eylemleri işe yarıyor. Buna ne sebep oluyor? Teşekkür ederim! Benim html ve CSS aşağıda.

html

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv:"Content-Type" content="text/html; charset=ISO-8859-1" />
    <script text="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/Javascript" src="jquery.js"> </script>

    <link href='http://fonts.googleapis.com/CSS?family=Droid+Sans+Mono' rel='stylesheet' type='text/CSS'>

    <link rel="stylesheet" type="text/CSS" href="jquery_home.CSS">


    <title> jQuery home </title>


</head>
<body>

<div id="container"> 

    

Learn jQuery

 

<div id="q_and_a_container" style="text-align: center">
    <div style="width: 200px; margin-left: auto; margin-right: auto; text-align: center" id="qa" height="500px"> Nate</div>
    <input type="submit" id="switch" value="See Answer" /> 
    <input type="submit" id="next" value="Next Question" />


</div>

<div id="answer_container">
    


</div>

</div>

<div id="another_container" style="width: 300px; margin-left: auto; margin-right: auto; text-align: center">

    

Add question

 

</div>





</body>

</html>

CSS

@font-face {
    font-family: "Chalk";
    src: url("../../font/KGSecondChancesSketch.ttf");
}

h1 {
    font-family: "Chalk";
}

html, body {
    height: 100%;
    margin: 0;
}

#container {
    width: 100%;
    height: 50%;
}

body {
    background-image: url(../../../img/compressedbgs/chalkboard.jpg);
    background-size: 100% 100%;
    background-repeat: repeat-x;
}


#q_and_a_container {
    height: 50%;
    position: relative;
    float: left;
    top: 25%;
    left: 2%;
    width: 45%;
    margin: 1%;
    background-color: rgba(255, 255, 255, 0.1);

    -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    -webkit-border-radius: 12px;
    -moz-border-radius: 7px;
    border-radius: 7px;

    background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0% white), color-stop(15%, white), 
            color-stop(100%, #D7E9F5));
    background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3);
    z-index: 45;
}

div#qa {
    position: relative;
    top: 25%;
    height: 75%;
    z-index: 50;
}

#answer_container {
    position: relative;
    float: left;
    height: 50%;
    top: 25%;
    left: 2%;
    width: 45%;
    background-color: rgba(0,0,0,0.1);
    margin: 1%;
    border: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

input {
    width: 107px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    font-family: 'Droid Sans Mono';
    z-index: 1000;
}

textarea {
    color: white;
    font-family: "Droid Sans Mono";
    width: 100%;
    height: 100%;
    border: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: rgba(0,0,0,0.1);
    -moz-appearance: none;
    font-size: medium;
}

textarea:focus {
    outline: none;
    border: none;
}

#add_question {
    clear: both;
}

a {
    text-decoration: none;

}

a:visited {
    color: black;
}

JS:

$(document).ready(function() {

    var question_number = 1;
    var tempText;
    var qno;


    $(document).on("click", "#switch", function(event) {
        if ($("#switch").val() == "See Answer") {
            tempText = $("#qa").text();
            $("#qa").text("");
            qno = "" + question_number;
            qno = "#" + qno;

            $.ajax({
                url: "answers.html",
                datatype: "html",
                success: function(data) {
                    $("#qa").html($(data).filter(qno).text());
                },
                error: function(r) {
                    alert("whoops, error in ajax request");
                }
            });//end AJAX request

           //change value
            $("#switch").val("See Question");
        } else {

            temptText = $("#qa").text();
            $("#qa").text("");
            qno = "" + question_number;
            qno = "#" + qno;

            $("#qa").text(tempText);            
            $("#switch").val("See Answer");
            }
    });

    $(document).on("click", "#next", function(event) {
        question_number = question_number + 1;
        qno = "" + question_number;
        qno = "#" + qno;

        $.ajax({
            url: "questions.html",
            datatype: "html",
            success: function(data) {
                $("#qa").text($(data).filter(qno).text());
            },
            error: function(r) {
                alert("whoops, error in ajax request for next question");
            }
        });//end AJAX request
    });

    $("textarea").keydown(function(e) {
    if(e.keyCode === 9) {//tab was pressed
       //get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var $this = $(this);
        var value = $this.val();

       //set textarea value to: text before caret + tab + text after caret
        $this.val(value.substring(0, start)
                    + "\t"
                    + value.substring(end));

       //put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

       //prevent the focus lose
        e.preventDefault();
    }
});


})
0
kaba 999999 gibi daha yüksek bir Z-endeksi değeri verin
katma yazar Tasos, kaynak
kaba 999999 gibi daha yüksek bir Z-endeksi değeri verin
katma yazar Tasos, kaynak
kaba 999999 gibi daha yüksek bir Z-endeksi değeri verin
katma yazar Tasos, kaynak
Js fonksiyonunu ekler misiniz? Ayrıca bir jsfiddle yardımcı olacaktır.
katma yazar andybeli, kaynak
Js fonksiyonunu ekler misiniz? Ayrıca bir jsfiddle yardımcı olacaktır.
katma yazar andybeli, kaynak
Js fonksiyonunu ekler misiniz? Ayrıca bir jsfiddle yardımcı olacaktır.
katma yazar andybeli, kaynak
Konteyner için yüksekliği ayarladığınızda, tıklamalar düğmelerden ziyade "q_and_a_container" div tarafından alınıyor. Bunu onaylayabilir misin?
katma yazar gvmani, kaynak
Konteyner için yüksekliği ayarladığınızda, tıklamalar düğmelerden ziyade "q_and_a_container" div tarafından alınıyor. Bunu onaylayabilir misin?
katma yazar gvmani, kaynak
Konteyner için yüksekliği ayarladığınızda, tıklamalar düğmelerden ziyade "q_and_a_container" div tarafından alınıyor. Bunu onaylayabilir misin?
katma yazar gvmani, kaynak
Evet. Daha yüksek bir z indeksi yardımcı olmadı.
katma yazar bst-for-life, kaynak
Evet. Daha yüksek bir z indeksi yardımcı olmadı.
katma yazar bst-for-life, kaynak
Evet. Daha yüksek bir z indeksi yardımcı olmadı.
katma yazar bst-for-life, kaynak
Sadece JS işlevi eklendi
katma yazar bst-for-life, kaynak
Sadece JS işlevi eklendi
katma yazar bst-for-life, kaynak
Sadece JS işlevi eklendi
katma yazar bst-for-life, kaynak
Bunu nasıl yaparım? "Q_and_a_container" olduğundan ve "container" olmadığından emin misin? Çünkü "kabın" yüksekliği sorunlara neden oluyor. Sadece aydınlatıcı!
katma yazar bst-for-life, kaynak
Bunu nasıl yaparım? "Q_and_a_container" olduğundan ve "container" olmadığından emin misin? Çünkü "kabın" yüksekliği sorunlara neden oluyor. Sadece aydınlatıcı!
katma yazar bst-for-life, kaynak
Bunu nasıl yaparım? "Q_and_a_container" olduğundan ve "container" olmadığından emin misin? Çünkü "kabın" yüksekliği sorunlara neden oluyor. Sadece aydınlatıcı!
katma yazar bst-for-life, kaynak

9 cevap

Sebebi, div için z-indeksinin girişlerin üstünde konumlandırılmış olmasıdır. Girişlerde z-endeksi ayarladınız ancak statik elemanlar olduğu için ihmal ediliyor.

Girdilere position: göreceli; ekleyin ve bunlar öne getirilecektir.

2
katma
Çok teşekkürler @Jonathon Milne! 2 saattir anlamaya çalışıyorum. Cevabınızı kabul ediyorum ama şu anda yapamam.
katma yazar bst-for-life, kaynak

Sebebi, div için z-indeksinin girişlerin üstünde konumlandırılmış olmasıdır. Girişlerde z-endeksi ayarladınız ancak statik elemanlar olduğu için ihmal ediliyor.

Girdilere position: göreceli; ekleyin ve bunlar öne getirilecektir.

2
katma
Çok teşekkürler @Jonathon Milne! 2 saattir anlamaya çalışıyorum. Cevabınızı kabul ediyorum ama şu anda yapamam.
katma yazar bst-for-life, kaynak

Sebebi, div için z-indeksinin girişlerin üstünde konumlandırılmış olmasıdır. Girişlerde z-endeksi ayarladınız ancak statik elemanlar olduğu için ihmal ediliyor.

Girdilere position: göreceli; ekleyin ve bunlar öne getirilecektir.

2
katma
Çok teşekkürler @Jonathon Milne! 2 saattir anlamaya çalışıyorum. Cevabınızı kabul ediyorum ama şu anda yapamam.
katma yazar bst-for-life, kaynak

div # qa cihazınız düğmeyle üst üste gelecektir. div # qa z-index: 50; 'e sahiptir. -1 olarak değiştirmek, düğmeyi tıklanabilir yapacaktır.

div#qa {
    height: 75%;
    position: relative;
    top: 25%;
    z-index: -1;
}

Check Fiddle here.

1
katma

div # qa cihazınız düğmeyle üst üste gelecektir. div # qa z-index: 50; 'e sahiptir. -1 olarak değiştirmek, düğmeyi tıklanabilir yapacaktır.

div#qa {
    height: 75%;
    position: relative;
    top: 25%;
    z-index: -1;
}

Check Fiddle here.

1
katma

div # qa cihazınız düğmeyle üst üste gelecektir. div # qa z-index: 50; 'e sahiptir. -1 olarak değiştirmek, düğmeyi tıklanabilir yapacaktır.

div#qa {
    height: 75%;
    position: relative;
    top: 25%;
    z-index: -1;
}

Check Fiddle here.

1
katma

2 düğmenizden önceki div (id = "qa") nedeniyle oluyor. Düğmeleri de kapatacak şekilde 200 piksel genişliğe ve 500 piksel yüksekliğe sahip olduğunu söylediniz. Ayrıca, bunun için 50'lik bir z indeksine sahipsiniz, bu da düğmelerinizin başında gelir.

Yapabileceğin 2 şey var.

Herhangi bir değere z-endeksi yapın, böylece div düğme katmanından sonra gelir (div'in aynı boyutta olmasını isteyebilirsiniz)

Ex -

z-index : -50;

veya div ve üst marjın boyutunu, düğmelerin div'den sonra gelmesini sağlayacak bir şey olarak azaltabilirsiniz.

Ex -

top : 5%;
height : 200px;
0
katma

2 düğmenizden önceki div (id = "qa") nedeniyle oluyor. Düğmeleri de kapatacak şekilde 200 piksel genişliğe ve 500 piksel yüksekliğe sahip olduğunu söylediniz. Ayrıca, bunun için 50'lik bir z indeksine sahipsiniz, bu da düğmelerinizin başında gelir.

Yapabileceğin 2 şey var.

Herhangi bir değere z-endeksi yapın, böylece div düğme katmanından sonra gelir (div'in aynı boyutta olmasını isteyebilirsiniz)

Ex -

z-index : -50;

veya div ve üst marjın boyutunu, düğmelerin div'den sonra gelmesini sağlayacak bir şey olarak azaltabilirsiniz.

Ex -

top : 5%;
height : 200px;
0
katma

2 düğmenizden önceki div (id = "qa") nedeniyle oluyor. Düğmeleri de kapatacak şekilde 200 piksel genişliğe ve 500 piksel yüksekliğe sahip olduğunu söylediniz. Ayrıca, bunun için 50'lik bir z indeksine sahipsiniz, bu da düğmelerinizin başında gelir.

Yapabileceğin 2 şey var.

Herhangi bir değere z-endeksi yapın, böylece div düğme katmanından sonra gelir (div'in aynı boyutta olmasını isteyebilirsiniz)

Ex -

z-index : -50;

veya div ve üst marjın boyutunu, düğmelerin div'den sonra gelmesini sağlayacak bir şey olarak azaltabilirsiniz.

Ex -

top : 5%;
height : 200px;
0
katma