อยากให้เส้นอยู่ด้านหลังรูป

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

อยากให้เส้นอยู่ด้านหลังรูป

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

อยากให้เส้นสีขาวไปอยู่แค่ข้างหลังรูปวงกลม ซึ่งตอนนี้เส้นมันทับอยู่ด้านบน ลองใช้ z-index: 0; ที่เส้นแล้วมันจะไปอยู่หลังพื้นหลังหายไปเลย
screenshot-localhost-2021.03.20-16_11_40.png
ที่อยากได้
HTML CSS-1.png
HTML CSS-1.png (31.85 KiB) Viewed 2036 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
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: อยากให้เส้นอยู่ด้านหลังรูป

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

ได้แล้วนะคะ ใส่ position:relative; ที่ css rn-one-img ของรูปวงกลมด้วย เพราะ z-index จะใช้งานคู่กับ position:relative กับ absolute

โค้ด: เลือกทั้งหมด

.rn-one-img{ /*ส่วนรูปวงกลม*/
    width: 50%;
     position:relative;
    z-index: 100;
}
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: อยากให้เส้นอยู่ด้านหลังรูป

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

เผื่อเจอปัญหา อื่น ควรใช้ relative แทนการกำหนด absolute จะยืดหยุ่นกว่า
ลองจัดลำดับของ tag div ใหม่
และตัวล่างสุดปรับ z-index เป็น auto

*** z-index ใช้ตัวเลขน้อยๆ ก็ได้ครับ เผื่อ ต้องมี overlay ด้านบนมาทำเวลาจะทำลูกเล่นอื่นๆ อีก
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: อยากให้เส้นอยู่ด้านหลังรูป

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

mindphp เขียน: 20/03/2021 4:40 pm เผื่อเจอปัญหา อื่น ควรใช้ relative แทนการกำหนด absolute จะยืดหยุ่นกว่า
ลองจัดลำดับของ tag div ใหม่
และตัวล่างสุดปรับ z-index เป็น auto

*** z-index ใช้ตัวเลขน้อยๆ ก็ได้ครับ เผื่อ ต้องมี overlay ด้านบนมาทำเวลาจะทำลูกเล่นอื่นๆ อีก
ขอบคุณค่ะ :icon_plusone:
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 72