Question

我是网络开发的新手。试图使网站徽标看起来不错。有两个元素，其中一个元素被另一个元素覆盖，因此用户无法先单击它们。

请帮助我，让他们一个接一个。我该如何仅使用CSS来做这些事情？

Codepen：https://codepen.io/h071/pen/YOeXaw

这是HTML部分：

$(function(){

    $(document).on('click', "#sameCarFromLastVisit", function()
    {
        var url = '<?php echo Router::url(array('controller' => 'Cars', 'action' => 'getBrandModel_ajax')); ?>';
        var checked = $(this).is(':checked');
        var data = {
            checked: $(this).val()
        };

        $.ajax({

            url: url,
            method: 'POST',
            data: data,
            dataType: 'json',

            beforeSend: function( xhr ) 
            {
                if(checked == 1){

                    $.blockUI({
                        message: '<h2>Please wait! searching brand and Model</h2>'
                    });

                }

            },
            complete: function () 
            {
                $.unblockUI();
            },
            success: function ($response, a, b) 
            {
                if(b.status == 200) 
                {
                    var $optionsBrand = $("#brandId").html($("<option />").val('').text('- selecione -'));

                    if($response)
                    {
                        console.log('response '+$response);
                        $optionsBrand.prop("disabled", false);

                        $.each($response, function(idbrand, value)
                        {
                            var $opt = new Option(value, idbrand);

                            $optionsBrand.append($opt);
                        });
                    }
                    else
                    {
                        $optionsBrand.prop("disabled", true);
                    }

                }
                else 
                {
                    alert($response);
                }
            },
            error: function(x, t, m) 
            {
                var msg = 'An unexpected error occur. ';

                if( t === "timeout" )
                {
                    msg += "wait 30 segundos and try again!";
                }
                else
                {
                    msg = t;
                }

                alert( msg );
            }
        }); //ajax
    }); // document on 'click'

}); // function

这是CSS：

<header>

<link rel="stylesheet" type="text/css" href="/a/www/css/style_header.css">

<nav class="container-fluid">
  <a class="logo" href="/a/www/index.php">
    <span>Sitename</span>
  </a>

<p id="reg-auth-title"><a href="/a/include/reg_auth.php">Login|Registration</a></p>

Answer 1

您需要使用z-index将链接放在上方徽标。

#reg-auth-title {
    z-index: 10;
    position: relative; // z-index works only with non-static positioned elements
}

如何确保某个元素未被另一个（CSS）覆盖？

1 个答案: