标签: css-position

嘿伙计们,我是一个完整的HTML和CSS noob,当他遇到问题时,他正在编写他的离线网站.

我有一个div,我使用绝对定位定位了几个元素.但是当我尝试定位输入字段时,它不会与其他文本垂直对齐.这是一个例子:

<div id="TopBar">
[...]
<h2 class="SubTitle" style="position:absolute; top:50px; left:75%;">Username: </h2>
<input type="text" name="username" style="display:inline; positon:absolute; top:50px; right: 5%;" />

当我运行此代码时,输​​入字段比"用户名:"大约30像素.为什么会这样,即使两者都有"顶级:50px"？

通过测试,我发现代码正常工作,没有div.这是为什么？

我知道我的编码非常糟糕,请向我解释我做错了什么.

是否有可能有一个绝对定位的透明div覆盖一系列可点击的div？我希望能够将鼠标悬停在下方的红色div上以获得响应.

<style type="text/css">

#holder{
    width:200px;
    height:200px;
}
.clickMe {
    width:100px;
    height:100px;
    cursor:pointer;
    background-color:red;
    border:1px solid black;
    float:left;
    margin:-1px;
    padding:0;
}
.hidey {
    position:absolute;
    top:0;
    left:0;
    z-index:50;
    height:50%;
    width:50%;
    opacity:.25;
    background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
</div>

我的标题包含徽标图像以及我的导航元素.我希望我的导航设备位于标题的底部,但不使用绝对定位或特定的顶部/左侧像素,因为我希望它能够响应.

到目前为止,这是我的代码

http://jsfiddle.net/Aiedail/86ZGd/

我试过添加像

 nav{margin-top: 50%;} 

但是使用了整页高度而不是包含div高度.

任何建议或帮助将不胜感激.

嗨我想将3个div放在页面中间,我让它们每个都向左浮动,以便它们并排放置,但我希望它们是页面的中心.

我让他们在与宽度的包装100%,并尝试使用margin:0px auto,以中心这个这个不工作,但width:100%还是width:auto,但是如果我指定的宽度,这似乎不过居中我不想指定的宽度以我的包装我希望它是页面的大小.

关于我做错了什么,我不完全确定.所以任何输入和一双新鲜的眼睛都会很棒!

我的代码在下面,或者您可以查看jsFiddle

的index.html

<div class="wrapper">

<div class="header">
    <div class="wrap">
        <span class="img_1"><img src="imgs/sjplogo.png" id="sjplogo"/></span>
        <h2>Website Service</h2>
        <span class="img_2"><img src="imgs/sslogo.png" id="sslogo"/></span>
</div></div>

<div class="maincontent">
    <div class="maincontentWrapper">
    <div class="topWrapper">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    </div><!--End topWrapper-->

    <div class="bottomWrapper">
    <div class="leftBottom"></div>
    <div class="rightBottom"></div>
    </div><!--End bottomWrapper-->

    </div><!-- End maincontentWrapper-->

</div>
<footer>

</footer>
</div>

style.css文件

@charset "utf-8";
/* CSS Document */

/********************************
* CSS Reset                     *
*********************************/
html, body, div, span, applet, object, …

我试图让一个<span>坐在固定高度的底部<td>,但它似乎没有工作.

我正在使用Firebug在Firefox中开发,这是我的标记和CSS.

我已经阅读了其他帖子,说明td高度需要修复,我已经做到了,但是我仍然遇到同样的问题.如何将跨度定位在td的底部？

<td class="details_amount">
  <span class="item_total_price">
    £<span id="amount_99201100099">49</span>
  </span>
  <br>
  <span class="person_price">£5</span>
</td>

td {
    height: 55px;
    padding-top: 1.8em;
    vertical-align: top;
}

.item_total_price {
    height: 100%;
}

.person_price {
    bottom: 0;
    position: relative;
}

我一直试图找到一个解决方案,并一直在搜索论坛,但你唯一的谈论百分比.

我有一个只包含文本的div.我需要它的最大宽度为700px,固定定位并在屏幕上水平居中.

在一个完美的世界里,这就是我想要的工作,但当然不会:

<div style="max-width: 700px; text-align: center; position: fixed; bottom: 40px; margin: auto;">sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</div>

有没有人有办法解决吗？

我重新创建了模板中遇到的问题。有一个导航有position: relative;。内部资产净值有一个DIV嵌套两个列表。
名单之一是绝对要坚持导航的位置。当div对其应用了转换时，就会发生此问题。
当绝对位置和相对位置的元素之间的div获得了transform属性时，绝对列表相对于div而不是nav进行定位。

MDN文档声明以下有关位置的信息：绝对

不要为元素留出空间。而是将其放置在相对于其最接近的祖先的指定位置（如果有），或者相对于其包含的块。绝对定位的框可以有边距，并且不会与其他任何边距一起折叠。

这是否意味着变换后的元素是定位元素？为什么这样做呢？我在Edge，FF和Chrome中进行了测试。他们的行为都一样。

您可以在下面运行重新创建的代码段。我正在将鼠标悬停在div上的div上应用转换。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
  min-height: 100%;
  height: 100%;
}
nav{
  background: #000;
  height: 100%;
  width: 50%;
  position: relative;
}
nav:hover > div{
      transform: translateX(50px) translateY(0) translateZ(0);
}
a{
  color: #fff;
}
ul{
  padding: 16px;
}
ul.main{
  background: blue;
}

ul.lower{
  position: absolute;
  background: red;
  bottom: 0;
  width: 100%; …

我正在尝试创建Toast通知，在大多数情况下，我的代码运行良好。但是，我正在努力将吐司面包放置在页面中所有其他内容的顶部，以便吐司＃1出现在页面顶部中的所有内容的顶部，吐司＃2出现在页面中所有内容的顶部，但将堆积在吐司下面＃1等

这是我的代码：

$(document).ready(function() {
  $("#btnSuccess").click(function() {
    createSuccessToast("everything is fine");
  });

  $("#btnError").click(function() {
    createErrorToast("something went wrong");
  });
});

function createSuccessToast(toastMessage) {
  createToast(true, toastMessage);
}

function createErrorToast(toastMessage) {
  createToast(false, toastMessage);
}

function createToast(isSuccess, toastMessage) {
  var toastContainer = createToastContainer(isSuccess);
  createToastHeader(toastContainer, isSuccess);
  createToastContent(toastContainer, toastMessage);
  initToast(toastContainer);
  destroyToast(toastContainer);
}

function createToastContainer(isSuccess) {
  var toastContainer = $("<div></div>");
  toastContainer.addClass("toastContainer");
  if (isSuccess) {
    toastContainer.addClass("toastContainerSuccess");
  } else {
    toastContainer.addClass("toastContainerError");
  }
  return toastContainer;
}

function createToastHeader(toastContainer, isSuccess) {
  var toastHeader = $("<div></div>");
  toastHeader.addClass("toastHeader");
  toastHeader.html(isSuccess ? "Success" : "Error");
  toastContainer.append(toastHeader);
} …

我需要做以下事情:

第二部分的内容应与第一部分和第三部分重叠.
我设法将content-div移到一边,或者我将第一或第二部分与"position:relative"和一个负的top/bottom值重叠.

是否有可能缩小背景包装div但是顺便说一下,它不会影响内包装内容div？

我简化了图像.这些部分具有成角度的伪元素(之前和之后).不知道,如果重要的话.

使用此代码,我设法将内容部分移至底部或顶部:

.site-container {
    position: relative;
    bottom: -100px;
} 

但主要部分仍然与内在内容一样高.

在父div（蓝色轮廓）内放置两个div（绿色和黄色）的好方法是什么，使其看起来像下面的第二幅图？（默认情况下，第一个图形是div的堆叠方式）。

我有一些这样的蓝色div，其绿色div的高度可变（不同的文本量），而黄色div总是相同的。

我希望黄色div始终位于容器的底部。 编辑：忘记提及我所有的蓝色父级div都应具有相同的高度

我尝试将黄色div定位为position:absolute与bottom:0蓝色div相同，position:relative但是这没有用，因为如果绿色div之一包含大量文本，则该文本将与黄色div重叠；

蓝色父div设置为 height:100%

我在这里想念什么？

抱歉，如果有新手问题，我将进入CSS和UI设计。