สอบถามวิธีเขียนปุ่ม submit ให้สามารถเลื่อนตามหน้าจอในเวอร์ชันโมบาย หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามวิธีเขียนปุ่ม submit ให้สามารถเลื่อนตามหน้าจอในเวอร์ชันโมบาย หน่อยครับ

สอบถามวิธีเขียนปุ่ม submit ให้สามารถเลื่อนตามหน้าจอในเวอร์ชันโมบาย หน่อยครับ
ตอนนี้ผมเขียนตัว css เพื่อทำให้ตัวปุ่ม submit สามารถเลื่อนตามหน้าจอเวอร์ชันโมบาย โดยการใช้ position: fixed; เเต่ปัญหาคือเมื่อ เลื่อนลงไปตรง footer มันจะเลื่อนลงไปด้วย เเต่หลักๆ ผมอยากให้มันหยุดอยู่ตรง สิ้นสุดรูปภาพ โลโก้รถ ผมต้องทำอย่างไรครับ พอจะเเนะนำวิธีหรือตัวอย่างให้หน่อยครับ

width: 30%;
height: 45px;
display: inline-block;
position: fixed;
margin-left: -25rem !important;
margin-top: 43rem;




Antineww 02-06-2020 13:39:07

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ใช้ postion fixed รวมกับ bottom:0px; ถ้าชิดขอบด้านล่าง ก็ 0 ห่างจากขอบด้านล่างเท่าไหร่
ก็กำหนดค่า bottom ตามต้องการ


บทความแนะนำที่เกี่ยวข้อง
การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่างอ่าน 43,691
รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบายอ่าน 52,367
ninenik 02-06-2020
 ความคิดเห็นที่ 2
จากความคิดเห็นที่ 1

สรุปออกมาเป็น Code ได้แบบคร่าวๆ ดังนี้ครับ

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	div.iBannerFix{
    height:50px;
    position:fixed;
    left:0px;
    bottom:100px;
    background-color:#0000ff;
    width:100%;color:white;
    z-index: 99;
	}
    div.iBannerFix2{
    height:50px;
    position:fixed;
    left:0px;
    bottom:40px;
    background-color:#000000;
    width:100%;color:white;
    z-index: 99;
	}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 500px) {
	div.iBannerFix{
    height:50px;
    position:fixed;
    left:0px;
    bottom:120px;
    background-color:#0000ff;
    width:100%;color:white;
    z-index: 99;
	}
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket" style="max-width:100%;height:auto;">

<div class="iBannerFix">
<p align="center">Sample Text</p>
</div>

<div class="iBannerFix2">
<p align="center">Sample Text2</p>
</div>

</body>
</html>

และ Link Code สำรองครับ

https://www.w3schools.com/code/tryit.asp?filename=GFE1ULBC3S6R


Sumate Mephokkij 09-06-2020 11:48






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ