Question

如何将内部div sqrBall移动到父div container的左下角。这是HTML代码：

<div class="container">
    <div class="sqrBall">

    </div>
</div>

这是CSS：

.container{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
    }
    .sqrBall{
        width: 10px;
        height: 10px;
        background-color: blue;

    }

这是DEMO

Answer 1

如果父元素具有相对定位，则可以在内部元素上使用绝对定位。例如：

.container{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    margin: 0 auto;
    position:relative;
}

.sqrBall{
    width: 10px;
    height: 10px;
    background-color: blue;
    position:absolute;
    bottom:0;
    left:0;
}

n.b。如果父元素没有相对定位，则内部元素将位于正文的左下角，而不是其父元素。 （至少在本例中）

Answer 2

试试这个演示 Fiddle

.sqrBall {
width: 10px;
height: 10px;
 background-color: blue;
 position: absolute;
 top: 98%;
 left: 0;
   }
.container
{
position:relative;
}

Answer 3

＆＃13;

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 0 auto;
  position: relative /* Container should have relative position */
}
.sqrBall {
  position: absolute; /* Child should have absolute position */
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: blue; 
}

＆＃13;

<div class="container">
  <div class="sqrBall">

  </div>
</div>

＆＃13;

Answer 4

.container{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
        position:relative;
    }
    .sqrBall{
        width: 10px;
        height: 10px;
        background-color: blue;
        position:absolute;
        bottom:0;
        left:0;

    }

Answer 5

请尝试以下操作： Demo

将以下内容与您的代码一起添加

CSS：

.container {       
    display:table;
}
.sqrBall {       
    float:left;
    margin-top: 100%;
}

Answer 6

您必须向现有类.sqrBall

添加两个属性

属性是......

position: relative;
top: 98%;

以下是工作演示，希望对您有所帮助

＆＃13;

<style type="text/css">
.container
{
   width: 500px;
   height: 500px;
   border: 1px solid black;
   margin: 0 auto;
}
.sqrBall 
{
    background-color: blue;
    height: 10px;
    position: relative;
    top: 98%;
    width: 10px;
}
</style>



<html>
<div class="container">
		<div class="sqrBall">

		</div>
	</div>

</html>

＆＃13;

将div放在左下角

6 个答案: