Question

这是我目前的布局

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

我知道如何通过在magento中创建新的新模块来编辑标题模板（添加/编辑css和html）。

然而我需要的是html和css代码，使徽标溢出而不会压低整个标题块。有可能吗？

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>

将Circled徽标添加到magento 2标题中

1 个答案: