将带圆圈的徽标添加到 magento 2 header

Question

这是我当前的布局

我需要添加一个圆形的新徽标。徽标 div 从 header 块向下溢出并具有更高的堆栈顺序（z 索引）。添加新徽标后，不得更改 header 块的高度。所以新布局如下：

我知道如何通过在 magento 中创建新模块来编辑 header 模板（adding/editing css 和 html）。

然而，我需要的是 html 和 css 代码来使徽标溢出而不向下推整个 header 块。这可能吗？

Html代码

<header class="page-header">
    <div class="header content">
        <span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 no-pad-left super-logo">
        <div class="main-logo">
            <h1 class="logo">
                <a href="example.com">
                    <img src="https://www.example.com/logo.png" alt="ex" width="1" height="1">
                </a>
            </h1>
        </div>
    </div>

<div class="block block-search col-lg-5 col-lg-offset col-sm-9">
    <div class="block block-title"><strong>Search</strong></div>
    <div class="block block-content">
        .
        .
        .
    </div>
</div>

<ul class="compare wrapper"><li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
    .
    .
</ul>

<ul class="header links">
....
</ul>

Answer 1

您已经通过使用 z-index 属性的建议获得了大部分答案。

header { width: 100%; background-color: #660066; color: #ffffff; position: fixed; top: 0; left: 0; z-index: 0 }

.main-logo { border-radius: 50%; background-color: #330033; z-index: 10; position: fixed; top: 5px; left: 5px; }

.action { margin: 1em 0 0.5em 8em }

.block-search { margin: 0 0 0.5em 8em }

<header class="page-header">
    <div class="header content">
        <span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 no-pad-left super-logo">
        <div class="main-logo">
            <h1 class="logo">
                <a href="example.com">
                    <img src="https://www.example.com/logo.png" alt="example" width="1" height="1">
                </a>
            </h1>
        </div>
    </div>

<div class="block block-search col-lg-5 col-lg-offset col-sm-9">
    <div class="block block-title"><strong>Search</strong></div>
    <div class="block block-content">
        .
        .
        .
    </div>
</div>
    </header>

<ul class="compare wrapper"><li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
    .
    .
</ul>

<ul class="header links">
....
</ul>

将带圆圈的徽标添加到 magento 2 header

Add Circled logo to magento 2 header

html

css

header

magento