为什么我的保证金不适用于头寸：固定？

Question

JSFiddle Demo

我有一个标题的div和内容包装的div。

出于某种原因，我不能在标题的底部有一个边距，迫使内容包装下推。它完全忽略了它，我不明白为什么。

有谁知道这是怎么回事？当我拿走这个位置时它不会这样做：固定;标题上的属性，但我希望它固定在顶部，所以滚动标题始终在视图中。

希望有人可以解释为什么会发生这种情况，或者至少可以解释它的名称，以便我可以谷歌。

var client = new HttpClient();
client.BaseAddress = new Uri(SERVER_BASE_URL); // https://...
// Works when BaseAddress="https://google.com" but not our https site
return client.GetAsync("/").ContinueWith(res =>
{
    if (res.IsFaulted)
        // res.StackTrace is empty >:( 
        MessageBox.Show("Faulted");
    else
        MessageBox.Show("Success");
});

body {
    margin: 0;
    padding: 0;
	font-family: arial;
	background: #5A9910;
	text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* ==========================Header with logo==*/
div.header {
	position: fixed;
	width: 100%;
	background: #ffffff;
	-webkit-box-shadow: 0 8px 6px -6px #333;
	-moz-box-shadow: 0 8px 6px -6px #333;
	box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
	width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
	width: 80%;
	height: 1600px;
	background: #ccc;
	margin: 0 auto;
}

Answer 1

将元素设置为position: fixed;时，将其从正常文档流＆＃34;中删除。想象一下，你的网站是一条河流，你从上面俯视它。每个元素都是那条河中的一块岩石。您应用于元素的任何margin就像围绕其中一块岩石的力场。

当你在其中一块岩石上设置position: fixed;时，你基本上将它从河里拉出来，这样岩石本质上是漂浮在河上的半空中。岩石和河流的水流对你来说看起来仍然是一样的，因为你在俯视之上，但岩石不再与河流相互作用。

如果你已经将margin应用于那块岩石，那么岩石周围的力场将不再保持任何水分远离它，因为岩石因其position: fixed;属性而在半空中盘旋。因此，没有水或其他岩石（其他元素）需要与之保持距离。你的岩石力场（你的元素边缘）正在推动空气稀薄，因此河流中的任何东西都不会受到影响。

但是一张图片胜过千言万语，俗话说：

这名男子并没有真正踢过比萨斜塔，但看起来确实如此！在这个例子中，图片的背景，包括比萨斜塔，是你的页面（或你的正常文件流＆＃39;），而人是一个元素（或者我们上一个例子中的摇滚）已应用position: fixed;。

详细了解排名属性here以及更新，here。

解决此问题的一种方法是将标题设置为top: 20px; z-index: 2;，以确保它位于z平面上的每个其他元素的顶部和上方，然后给你的身体{{1和position: relative;等于标题的高度（在本例中为margin-top）加上标题的52px属性的值。要增加标题和身体之间的空间，只需增加top金额即可。这有时被称为＆＃34;粘贴页眉/页脚＆＃34;做法。这是一个演示：

＆＃13;

＆＃13;

margin-top

＆＃13;

body {
    margin: 0;
    padding: 0;
    font-family: arial;
    background: #5A9910;
    text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* ==========================Header with logo==*/
div.header {
    position: fixed;
    top: 20px;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    -webkit-box-shadow: 0 8px 6px -6px #333;
    -moz-box-shadow: 0 8px 6px -6px #333;
    box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
    width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
    width: 80%;
    height: 1600px;
    background: #ccc;
    margin: 0 auto;
    position: relative;
    margin-top: 72px;
}

＆＃13;

＆＃13;

＆＃13;

P.S。 <div class="wrap"> <div class="header"> <p>Header</p> </div> <div class="contentwrap"> <p>Test</p> </div> </div>是CSS属性（确切地说是属性 - 值对），而不是HTML属性。

Answer 2

我认为你必须明确宣布固定div的位置。

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

并在内容div处分配保证金

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

如果您需要的话，请检查这个小提琴： https://jsfiddle.net/0cmvg92m/3/

Answer 3

保证金不起作用，因为标题的位置是固定的。

你必须在contentwrap上使用padding-top。

Answer 4

您的标题包含属性position:fixed。因此，您应用于标题的保证金不会影响内容部分。

要解决此问题，您需要为contentwrap元素

提供边距或填充

Answer 5

与我合作的CSS是

#toaster-container {
  width: 99%;
  height: 98%;
  margin: 15px;
  position: fixed;
  top: 0;
}

但是我不确定它是如何工作的，也不知道它是否仍然可以在缩放中工作

还有一件事情，上面的CSS使整个屏幕的宽度（100％）。也许会破坏top，bottom，right和left属性的某些用法