CSS 将子 div 扩展到容器 div 之外

Extend child div beyond container div

提问by Ryan Ma

I'm trying to expand this div across with width of the browser. I've read from herethat you can use {position:absolute; left: 0; right:0;}to achieve that as in the jsfiddle here: http://jsfiddle.net/bJbgJ/3/

我正在尝试将这个 div 扩展到浏览器的宽度。我从这里读到 ，你可以用{position:absolute; left: 0; right:0;}这里的 jsfiddle 来实现它：http: //jsfiddle.net/bJbgJ/3/

But the problem is that my current #containerhas a {position:relative;}property, and hence if I apply {position:absolute}to the child div, it would only refer to #container. Is there a way to still extend my child div beyond the #container?

但问题是我的 current#container有一个{position:relative;}属性，因此如果我申请{position:absolute}子 div，它只会引用#container. 有没有办法仍然将我的孩子 div 扩展到#container？

回答by Brett

I can think of five ways to potentially accomplish your goal:

我可以想到五种可能实现目标的方法：

1. Use negative margins on the inner element to move it outside of the parent

2. Use Javascript to move the inner element outside of the parent.

3. Change the source code and move the inner element outside of the parent.

4. Use position: fixedon the inner element. This will allow the inner element to break out but has the down side that the element will be fixed at the given position (never moving).

5. Remove the position: relative;from the parent element or give the parent element a position: static

1. 在内部元素上使用负边距将其移出父元素

2. 使用 Javascript 将内部元素移动到父元素之外。

3. 更改源代码并将内部元素移到父元素之外。

4. 用于position: fixed内部元素。这将允许内部元素爆发，但不利的一面是元素将固定在给定位置（永不移动）。

5. position: relative;从父元素中删除或给父元素一个position: static

回答by Jules

You can try adding overflow:visibleto the parent div, then making the child wider than the parent.

您可以尝试添加overflow:visible到 parent div，然后使 child 比 parent 更宽。

回答by spookyburger

Parent to position:static, child to position:absoluteor

父到position:static，子到position:absolute或

Parent to position:relative, child to position:fixed(with the fixed, never moving downside)

父到position:relative，子到position:fixed（固定，永不移动的缺点）

Your left: 0; right:0;works with both of these solutions, just note that your child div will draw on top of any divs below it in code, no matter what the div's displayproperty is set to. You will either have to add a padding-topvalue to the next div to compensate (simple example in jsfiddle), or another div underneath that has the same height behavior as the child (a much more elaborate example in codepen), which is probably not ideal, but works in simple html/css.

您left: 0; right:0;可以使用这两种解决方案，只需注意您的子 div 将在代码中绘制在其下方的任何 div 之上，无论 div 的display属性设置为什么。您要么必须为padding-top下一个 div添加一个值以进行补偿（jsfiddle 中的简单示例），要么下面的另一个 div 与子项具有相同的高度行为（codepen 中的一个更复杂的示例），这可能并不理想，但在简单的 html/css 中工作。

回答by Marhawk

I had a case where I needed to make a carousel and have it wrap outside of the parent element. You can set the child element to have a width: 100vwand set the parent element to have a max-width of a specific amount of pixels...or a calculated amount. With this setup our child component extends itself beyond the parent. JSFiddle

我有一个案例，我需要制作一个旋转木马并将其包裹在父元素之外。您可以将子元素设置为具有 awidth: 100vw并将父元素设置为具有特定像素数量的最大宽度......或计算量。通过这种设置，我们的子组件将自身扩展到父组件之外。JSFiddle

    .parent {
     // our parent container has 20px margins on each side so we set its max width accordingly
      max-width: calc(100vw - 20px)
    }

    .child {
      // set the child to wrap the entire viewport width. Account for any margins from the parent and offset them with a negative margin
      width: 100vw;
      transform: translateX(-20px);
    }