Question

我正试图将徽标与背景图片重叠（见下面的截图）div

def main ():

    morse_code = {"a":".-","b":"-...","c":"-.-.","d":"-..","e":".","f":"..-.","g":"--.","h":"....","i":"..","j":".---","k":"-.-","l":".-..",
                  "m":"--","n":"-.","o":"---","p":".--.","q":"--.-","r":".-.","s":"...","t":"-","u":"..-","v":"...-","w":".--","x":"-..-","y":"-.--","z":"--.."}

    phrase = input("please enter your word or words: ")
    print("your word or sentence translated to morse code is : ")
    for key in phrase:
        if not key.isdigit():
            print(morse_code[key], end = " ")


retry()

def retry ():
    main ()

表示.header div和

position: absolute;

表示.logo-svrs div

外部div似乎不会与.bg-banner重叠。溢出：可见也不起作用。没有成功。

我必须通过

来显示徽标的标题

position: relative;

能够看到徽标的位置。在下面的屏幕截图中，正确的屏幕截图是我需要的。

HTML

display: visible;

CSS

<div class="header">
    <a href="http://www.svrs.com"><img src="imgs/logo-svrs.png" class="logo-svrs" alt="Sorenson VRS"></a>
</div>
<div class="bg-banner">
    <div class="notice-wrapper">
        <div class="notice-overlay">
            <div class="notices effect">
                <div class="box-left-bad">
                    <img src="imgs/exclamatory.png" alt="Warning! - Sorenson VRS">
                    <p class="good">WARNING!</p>
                </div>
                <div class="box-right-bad">
                    <p>We are currently experiencing a technical difficulty that may be impacting our service.  You may want to try restarting your device (VP, VP2, PC, Mac or mobile device) to see if this resolves the issue.  At this time, we do not know when the technical difficulty will be resolved.  We are working to quickly resolve the problem.  This message will no longer appear on this page when the issue is resolved.</p> 
                    <p>Thank you for your patience.</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以在.bg-banner div中移动.header div并添加此

<强>的CSS：

.header {  
    display: visible; /*this is not valid*/
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
}

这是一个可能的解决方案：

https://jsfiddle.net/kd91t26L/3/

徽标不会在背景图像上重叠

1 个答案: