วันจันทร์ที่ 12 ตุลาคม พ.ศ. 2558

Position:absolute ใน outter div แต่ width มันล้นออกมาทำอย่างไร

ใครเคยเขียน css โดยใช้ position:absolute คงเคยเจอปัญหามาบ้างนะครับ ตัวอย่างนี้คือ

.outter //สินค้า
{
  width: 50%;
  height: 200px;
}
.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: red;
}

มันจะออกมาประมาณนี้ครับ
ซึ่งดูแล้วขอบสีแดงมันล้นกรอบ (outter ออกมา) เยอะจนสุดจอเลยครับ

ซึ่งวิธีแก้ปัญหา ในกรณีนี้ก็คือ ต้องใส่ postion:relative เข้าไปในกรอบนอกคือ outter ด้วยครับ เปลี่ยนโค๊ดใหม่ก็จะเป็น

.outter //สินค้า
{
  width: 50%;
  height: 200px;
  postion:relative;
}
.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: red;
}

จะออกมาได้แบบนี้ครับ ใครเคยเจอปัญหานี้ ทำตามนี้ได้เลยครับ ผ่านชัวร์ 100% ครับผม


credit : ภาพประกอบจากเว็บ http://www.jumnotebook.com