Html cssdiv定位的帮助

Html cssdiv定位的帮助,html,css,Html,Css,这里有一个垒球CSS问题(希望如此) 我正在寻找一些CSS帮助关于附加的屏幕截图。我有一个较大的盒子正确居中,但较小的盒子给我带来了一些问题 对于顶部的小框,我最初尝试使用绝对定位,但一旦浏览器调整大小,它就会粘住,但我的大框显然会移动,所以这是不好的 底部的小盒子基本上需要粘在底部。我计划用jQuery将其隐藏并显示,这样它就不会破坏内部任何文本的流动(我只希望它显示在所有其他内容之上) 真的,除了上面提到的,我没有任何限制,所以任何建议都会非常有用:) 编辑-这是我当前所在的位置。 #co

这里有一个垒球CSS问题(希望如此)

我正在寻找一些CSS帮助关于附加的屏幕截图。我有一个较大的盒子正确居中,但较小的盒子给我带来了一些问题

对于顶部的小框,我最初尝试使用绝对定位,但一旦浏览器调整大小,它就会粘住,但我的大框显然会移动,所以这是不好的

底部的小盒子基本上需要粘在底部。我计划用jQuery将其隐藏并显示,这样它就不会破坏内部任何文本的流动(我只希望它显示在所有其他内容之上)

真的,除了上面提到的,我没有任何限制,所以任何建议都会非常有用:)

编辑-这是我当前所在的位置。

#container {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

我认为你的思路是对的。如果您不关心框的分层/重叠,那么只需对小框使用
position:absolute
,对大框使用
position:relative
。后者可能是你丢失的钥匙,因为它将小盒子固定在大盒子上

使现代化 我不建议像其他一些用户那样使用负边距。
position:absolute
的要点是使用属性
right
top
bottom
left
精确放置元素。如果移动绝对定位的元素时仅使用负边距,它仍将取决于它在文档顺序中的位置


例如,如果我将大量内容或更大的图像放在绝对定位元素之前,并带有负边距,则它将不再出现在同一位置。如果这是需要的,那就太好了。但根据最初的问题,我不这么认为。

我认为你的思路是对的。如果您不关心框的分层/重叠,那么只需对小框使用
position:absolute
,对大框使用
position:relative
。后者可能是你丢失的钥匙,因为它将小盒子固定在大盒子上

使现代化 我不建议像其他一些用户那样使用负边距。
position:absolute
的要点是使用属性
right
top
bottom
left
精确放置元素。如果移动绝对定位的元素时仅使用负边距,它仍将取决于它在文档顺序中的位置

例如,如果我将大量内容或更大的图像放在绝对定位元素之前,并带有负边距,则它将不再出现在同一位置。如果这是需要的,那就太好了。但根据最初的问题,我不这么认为。

你的(大)盒子是否有固定的高度/宽度

不管怎样,试着将你的小盒子设置为绝对值,但不要使用“左:20px;上:30px”;而是“右边缘:-50px;上边缘:-80px;”,这可能是解决方案

祝你好运

您的(大)盒子是否有固定的高度/宽度

不管怎样,试着将你的小盒子设置为绝对值,但不要使用“左:20px;上:30px”;而是“右边缘:-50px;上边缘:-80px;”,这可能是解决方案


祝你好运

使用z-index使底部div覆盖所有其他内容,并在需要时删除/隐藏它。这肯定是一个更好的css“立场:绝对;利润上限:-40px;左边距:20px;你也可以做它作为保证金:-40px20px10px-3px;如果需要的话。一般来说,我建议您避免绝对定位,或者以不需要这种方法的方式设计页面

使用z-index使底部div覆盖所有其他内容,并在需要时删除/隐藏它。这肯定是一个更好的css“立场:绝对;利润上限:-40px;左边距:20px;你也可以做它作为保证金:-40px20px10px-3px;如果需要的话。一般来说,我建议您避免绝对定位,或者以不需要这种方法的方式设计页面

打败我!这可能是正确的方法。对于最下面的一个,我当然希望它重叠…但是位置:绝对是否保持它相对于浏览器视口而不是div?外框居中并随浏览器移动…@espias如果大div未设置为position:relative,则小div将与视口相对,如Jason所建议。此外,您还可以通过使用大div上的溢出属性来控制小div与大div的重叠。此外,如下文所述,还可以使用小div上的边距来定位,而不是使用左侧或顶部。
position:relative
锚定任何绝对定位的子元素。否则,默认锚定为主体标记。您为什么要指示您负
页边距
?我不会建议…打败我!这可能是正确的方法。对于最下面的一个,我当然希望它重叠…但是位置:绝对是否保持它相对于浏览器视口而不是div?外框居中并随浏览器移动…@espias如果大div未设置为position:relative,则小div将与视口相对,如Jason所建议。此外,您还可以通过使用大div上的溢出属性来控制小div与大div的重叠。此外,如下文所述,还可以使用小div上的边距来定位,而不是使用左侧或顶部。
position:relative
锚定任何绝对定位的子元素。否则,默认锚定为主体标记。您为什么要指示您负
页边距
?我不建议…是的,外框的宽度和中心是固定的,所以请尝试“位置:绝对”和“顶部边距:-40px;左侧边距:20px;”方式;-)是的,外框的宽度和中心是固定的,所以请尝试“位置:绝对”和“上边距:-40px;左边距:20px;”方式;-)