HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์
Moderator: mindphp
-
eange08
- PHP VIP Members
- โพสต์: 16378
- ลงทะเบียนเมื่อ: 22/12/2020 10:09 am
โพสต์ที่ยังไม่ได้อ่าน
โดย eange08 »
อยากให้เส้นสีขาวไปอยู่แค่ข้างหลังรูปวงกลม ซึ่งตอนนี้เส้นมันทับอยู่ด้านบน ลองใช้ z-index: 0; ที่เส้นแล้วมันจะไปอยู่หลังพื้นหลังหายไปเลย
ที่อยากได้
- HTML CSS-1.png (31.85 KiB) Viewed 2070 times
Code ส่วนหน้าจอ
โค้ด: เลือกทั้งหมด
<div class="row">
<!--ส่วนรูปวงกลม-->
<div class="col-md-4" style="text-align: center;"><img class="rn-one-img" src="images/main-02/1.png" alt="" /></div>
<div class="col-md-4" style="text-align: center;"><img class="rn-one-img" src="images/main-02/2.png" alt="" /></div>
<div class="col-md-4" style="text-align: center;"><img class="rn-one-img" src="images/main-02/3.png" alt="" /></div>
<div class="col-md-4" style="text-align: center;"><img class="rn-one-img" src="images/main-02/4.png" alt="" /></div>
<div class="col-md-4" style="text-align: center;"><img class="rn-one-img" src="images/main-02/5.png" alt="" /></div>
<div class="col-md-4" style="text-align: center;"><img class="rn-one-img" src="images/main-02/6.png" alt="" /></div>
<!--ส่วนเส้นสีขาว-->
<div class="rn-one-row-border"> </div>
</div>
ส่วน CSS
โค้ด: เลือกทั้งหมด
.rn-one-img{ /*ส่วนรูปวงกลม*/
width: 50%;
z-index: 100;
}
.rn-one-row-border{ /*ส่วนเส้นสีขาว*/
border:3px solid #fff;
height:11em;
width:90%;
position: absolute;
top:35%;
left:4.2%;
z-index: 0;
}
-
eange08
- PHP VIP Members
- โพสต์: 16378
- ลงทะเบียนเมื่อ: 22/12/2020 10:09 am
โพสต์ที่ยังไม่ได้อ่าน
โดย eange08 »
ได้แล้วนะคะ ใส่ position:relative; ที่ css rn-one-img ของรูปวงกลมด้วย เพราะ z-index จะใช้งานคู่กับ position:relative กับ absolute
โค้ด: เลือกทั้งหมด
.rn-one-img{ /*ส่วนรูปวงกลม*/
width: 50%;
position:relative;
z-index: 100;
}
-
mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41360
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย mindphp »
เผื่อเจอปัญหา อื่น ควรใช้ relative แทนการกำหนด absolute จะยืดหยุ่นกว่า
ลองจัดลำดับของ tag div ใหม่
และตัวล่างสุดปรับ z-index เป็น auto
*** z-index ใช้ตัวเลขน้อยๆ ก็ได้ครับ เผื่อ ต้องมี overlay ด้านบนมาทำเวลาจะทำลูกเล่นอื่นๆ อีก
-
eange08
- PHP VIP Members
- โพสต์: 16378
- ลงทะเบียนเมื่อ: 22/12/2020 10:09 am
โพสต์ที่ยังไม่ได้อ่าน
โดย eange08 »
mindphp เขียน: ↑20/03/2021 4:40 pm
เผื่อเจอปัญหา อื่น ควรใช้ relative แทนการกำหนด absolute จะยืดหยุ่นกว่า
ลองจัดลำดับของ tag div ใหม่
และตัวล่างสุดปรับ z-index เป็น auto
*** z-index ใช้ตัวเลขน้อยๆ ก็ได้ครับ เผื่อ ต้องมี overlay ด้านบนมาทำเวลาจะทำลูกเล่นอื่นๆ อีก
ขอบคุณค่ะ
-
-
- 1 ตอบกลับ
- 755 แสดง
-
โพสต์ล่าสุด โดย thatsawan
31/10/2019 5:20 pm
-
-
- 1 ตอบกลับ
- 2146 แสดง
-
โพสต์ล่าสุด โดย thatsawan
16/01/2017 10:38 pm
-
-
- 4 ตอบกลับ
- 1092 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
14/08/2019 4:18 pm
-
-
- 2 ตอบกลับ
- 1159 แสดง
-
โพสต์ล่าสุด โดย Before Dong
08/09/2017 11:01 am
-
-
- 7 ตอบกลับ
- 993 แสดง
-
โพสต์ล่าสุด โดย MBMoo
04/01/2021 12:22 pm
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 86