Question

我正在寻找一些方向，因为我有点迷失。

我有一个容器div，其中包含：在我用于在页面上添加一些信息的样式之前。这很有效，因为我在How can I add a large faded text background via css?找到了使用SO的示例。我想要的是当＆＃34; main＆＃34; div被扩展，它掩盖了：在伪元素的内容之前。

我尝试了各种div结构（容器）组合，并使用了伪元素和主div的z-index。请注意，我不能放一个＆＃34; z-index＆＃34; ＆＃34;标题＆＃34;的-1文本......因为它实际上隐藏在我实际想要在实际应用程序中看到的内容之后。

HTML

<div class="show-title" data-div-title="Div Title">
    <div class="center-me">
        This is my box!
    </div
<div>
<button id="set500">500px</button>
<button id="set1000">1000px</button>
<button id="set1500">1500px</button>

CSS

.show-title::before {
    color: dimgrey;
    content: attr(data-div-title);
    display: block;
    font-size: 1.2em;
    line-height: 1;
    position: absolute;
    top: 10px;
    left: 10px;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    text-orientation: upright;
    padding: 3px;
    background-color: gainsboro;
    border: 1px solid darkgray;
    border-radius: 3px;
    z-index:1;
}

.center-me {
    color: dimgrey;
    padding:10px;
    background-color: gainsboro;
    border: 1px solid maroon;
    width: 500px;
    height: 300px;
    margin-left: auto ;
    margin-right: auto ;
    overflow: auto;
    z-index:10;
}

JavaScript（仅用于扩大主要内容div，而不是实际问题的一部分！）

(function($){
    $("#set500").on("click", function() {
        $(".center-me").width("500px");
    })

    $("#set1000").on("click", function() {
        $(".center-me").width("1000px");
    })

    $("#set1500").on("click", function() {
        $(".center-me").width("1500px");
    })
})(jQuery);

我创建了一个小jsFiddle以显示我所指的内容。当＆＃34;框＆＃34;扩大了，我希望它能够超越＆＃34; （基本上隐藏）任何＆＃34;标题＆＃34;文本。（剩下的任何一点都很好！）

http://jsfiddle.net/uLohn3e4/3/

指向任何方向都很有用，因为我无法找到我想要完成的任务。即使这是完全尝试新的布局（实现类似的东西）。如果我遗漏了任何有用的信息，请提前...先谢谢。

Answer 1

只需将Loading composer repositories with package information Updating dependencies (including require-dev) - Removing jms/serializer-bundle (1.0.0) - Installing jms/serializer-bundle (1.1.0) Downloading: 100% Writing lock file Generating autoload files > Incenteev\ParameterHandler\ScriptHandler::buildParameters Updating the "app/config/parameters.yml" file > Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::buildBootstrap X-Powered-By: PHP/4.4.9 Content-type: text/html Parse error: syntax error, unexpected T_STRING, expecting T_CONSTANT_ENCAPSED_STRING or '(' in /home/findexpocq/Rest/vendor/sensio/distribution-bundle/Sensio/Bundle/DistributionBundle/Resources/bin/build_bootstrap.php on line 13 Script Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::buildBootstrap handling the post-update-cmd event terminated with an exception [RuntimeException] An error occurred when generating the bootstrap file. update [--prefer-source] [--prefer-dist] [--dry-run] [--dev] [--no-dev] [--lock] [--no-plugins] [--no-custom-installers] [--no-autoloader] [--no-scripts] [--no-progress] [--with-dependencies] [-v|vv|vvv|--verbose] [-o|--optimize-autoloader] [-a|--classmap-authoritative] [--ignore-platform-reqs] [--prefer-stable] [--prefer-lowest] [--] [<packages>]... X-Powered-By: PHP/5.4.38 Content-type: text/html Warning: Composer should be invoked via the CLI version of PHP, not the cgi-fcgi SAPI添加到您的position:relative;元素中即可为了你的z-index to apply ^z-index@MDN。

http://jsfiddle.net/uLohn3e4/5/

覆盖div＆＃34;：之前＆＃34;内容与主div

1 个答案: