Question

目前我有这个：

<img src=assets/img/Guild/0000$logo/$logoColor.png class=\"avatar img-responsive\" style=\"margin: 0 auto;\">
<img src=assets/img/Guild/0000$logoBG/$logoBGColor.png class=\"avatar img-responsive\" style=\"margin: 0 auto;\">

Visual Example

所以第一个是徽标（在示例中是蝴蝶），第二个是它的背景（绿色边框）。目前它在顶部显示徽标，在背景下显示空间，但我希望在背景上显示徽标（蝴蝶在绿色边框的顶部。）帮助？

Answer 1

你可以让位置绝对让它们相互重叠，然后添加一个z-index来指示哪一个应该在顶部

    <!DOCTYPE html>
<html lang="en">

<head>
  <title>My ParseApp site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- bootstrap version 3.3.5 -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- angularjs version 1.4.8 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <!-- UIBootstrap version 0.14.3 -->
  <script src="ui_bootstrap.js"></script>

  <!-- roboto font 
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>-->

  <link rel="stylesheet" href="page_border.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container" ng-app="app" ng-controller="mainController">

    <div class="text-center">
      <p class="text-success">Example of using UI Bootstrap to create responsive html elemnts that are data-bound</p>
    </div>

    <h2>Buttons</h2>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
        Breakfast
      </label>
      <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
        Lunch
      </label>
      <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
        Dinner
      </label>
    </div>

    <pre><code>{{ bigData | json }}</code></pre>

    <h2>Collapse</h2>

    <a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
    Toggle Panel
  </a>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <a href="#" ng-click="isCollapsed = !isCollapsed">
          Collapsible Group Item #1
        </a>
      </h4>
      </div>
      <div collapse="isCollapsed">
        <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
          you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>

    <pre><code>{{ isCollapsed }}</code></pre>

  </div>




  <!-- Modules -->

    <!-- Controllers 
    <script src="HomeController.js"></script>
    <script src="PhotoController.js"></script>

    <!-- Services 
    <script src="photos.js"></script>-->



</body>

</html>

使图像落后于另一个

1 个答案: