สอบถามวิธีเขียนปุ่ม 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

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

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

บทความแนะนำที่เกี่ยวข้อง
การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง	อ่าน 44,189
รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย	อ่าน 52,837

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน