将DIV放在其他DIV和图像上

时间:2016-12-16 19:01:07

标签: html css

我有以下HTML(Plunker Example):

<div class="first">
  <img src="http://placehold.it/350x150">
</div>

<div class="second">
  Lorem Ipsum ...
</div>        

我需要将第二个DIV的一部分放在第一个DIV上,所以我使用了:

body {
  text-align: center;
}

.first {
  background-color: orange;
  z-index: 100;
}

.first img {
  display: block;
  margin: 0 auto;
}

.second {
  background-color: red;
  margin: -80px 0 auto;
  z-index: 200;
}

奇怪的是,第二个DIV中的文字出现在图像上,而不是第二个DIV。红色应该在图像上,因为文本是......

有谁知道如何解决这个问题?

4 个答案:

答案 0 :(得分:2)

userPool.signUpInBackground(userId, password, userAttributes, null, handler); 在第二个div

答案 1 :(得分:1)

尝试相对定位第二个div:

.second {
  background-color: red;
  margin: 0 auto;
  position:relative;
  z-index: 200;
}

答案 2 :(得分:1)

默认情况下,<div>元素为position: static,忽略包括z-index在内的定位CSS。将position: relative添加到.second元素可以使z-index正常工作。

我还将负边距更改为top: -80px,这更清晰。

body {
  text-align: center;
}

.first {
  background-color: orange;
  z-index: 100;
}

.first img {
  display: block;
  height: auto;
  outline: 0;
  width: 100%;
}

.second {
  background-color: red;
  z-index: 200;

  position: relative;
  top: -80px;
}
<body>

  <div class="first">
    <img src="http://placehold.it/350x150">
  </div>

  <div class="second">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>


</body>

答案 3 :(得分:0)

您可以尝试使用以下代码:

// Globals
var ss = SpreadsheetApp.getActiveSpreadsheet();
var name = ss.getName();

// Each edit, check for a rename
function onEdit() {

  // Grab the stored name from opening
  var setName = PropertiesService.getDocumentProperties().getProperty("name");

  // Get the current name of the sheet.
  var currentName = SpreadsheetApp.getActiveSpreadsheet().getName();

  // If it doesn't match, there's been a rename. Log and reset the stored name.
  if(setName != currentName) {
    Logger.log("Renamed from " + setName + " to " + currentName);
    PropertiesService.getDocumentProperties().setProperty("name", currentName)
    // do something else
  }
}

// Store the name when the sheet is opened
function onOpen() {
  var currentName = PropertiesService.getDocumentProperties().setProperty("name", name);
  Logger.log(currentName.getProperty("name"));
}
相关问题