คำถามติดแท็ก css-position

ฉันกำลังพยายามหา div ที่position:fixedจัดกึ่งกลางหน้าเพจ ฉันสามารถทำได้โดยใช้ div ตำแหน่งที่แน่นอนโดยใช้ "แฮ็ก" นี้ left: 50%; width: 400px; margin-left:-200px ... โดยที่ค่าขอบซ้ายคือครึ่งหนึ่งของความกว้างของ div สิ่งนี้ดูเหมือนจะใช้ไม่ได้กับ div ตำแหน่งคงที่ แต่เพียงแค่วางโดยให้มุมซ้ายสุด 50% และละเว้นการประกาศระยะขอบซ้าย มีแนวคิดในการแก้ไขอย่างไรเพื่อให้ฉันสามารถจัดตำแหน่งองค์ประกอบคงที่ได้ และฉันจะให้โบนัส M&M หากคุณสามารถบอกวิธีที่ดีกว่าในการจัดตำแหน่งองค์ประกอบที่อยู่ตรงกลางได้ดีกว่าวิธีที่ฉันอธิบายไว้ข้างต้น

127 html  center  alignment  css-position 

ฉันติดอยู่กับเรื่องนี้เล็กน้อยและคิดว่าฉันจะแชร์สิ่งนี้position: sticky+ flexbox gotcha: เหนียว Div ของฉันทำงานได้ดีจนกระทั่งฉันเปลี่ยนมุมมองของฉันไปยังคอนเทนเนอร์กล่องดิ้นและทันใดนั้น div ก็ไม่เหนียวเมื่อถูกห่อด้วยแม่แบบ flexbox .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box …

115 css  flexbox  css-position  sticky 

ตำแหน่ง: เหนียวใช้งานได้กับเบราว์เซอร์มือถือบางรุ่นในขณะนี้ดังนั้นคุณสามารถเลื่อนแถบเมนูไปพร้อมกับหน้าได้ แต่จะติดอยู่ที่ด้านบนของวิวพอร์ตเมื่อใดก็ตามที่ผู้ใช้เลื่อนผ่าน แต่จะเกิดอะไรขึ้นถ้าคุณต้องการปรับสไตล์แถบเมนูเหนียวของคุณเล็กน้อยเมื่อใดก็ตามที่ 'ติด' อยู่? เช่นคุณอาจต้องการให้แถบมีมุมโค้งมนเมื่อใดก็ตามที่เลื่อนไปพร้อมกับหน้า แต่ทันทีที่มันเกาะอยู่ที่ด้านบนสุดของวิวพอร์ตคุณจะต้องกำจัดมุมที่โค้งมนด้านบนออกและเพิ่มเงาเล็กน้อยด้านล่าง มัน. มี pseudoselector ชนิดใด (เช่น::stuck) เพื่อกำหนดเป้าหมายองค์ประกอบที่มีposition: sticky และกำลังเกาะอยู่หรือไม่? หรือผู้ขายเบราว์เซอร์มีอะไรเช่นนี้ในท่อหรือไม่? ถ้าไม่ฉันจะขอได้ที่ไหน NB. โซลูชัน javascript ไม่ดีสำหรับสิ่งนี้เนื่องจากบนมือถือคุณมักจะได้รับscrollเหตุการณ์เดียวเมื่อผู้ใช้ปล่อยนิ้วดังนั้น JS จึงไม่สามารถทราบช่วงเวลาที่แน่นอนที่เกณฑ์การเลื่อนผ่าน

111 css  css-selectors  css-position 

ฉันมีองค์ประกอบซึ่งมี CSS ต่อไปนี้: .elem { left: 0; position: fixed; right: 0; width: 60%; z-index: 1000; } องค์ประกอบไม่ครอบคลุมทั้งหน้าจอ ฉันต้องการให้ "จัดตำแหน่ง" ทางด้านขวามือของหน้าจอ นี่จะเป็นเรื่องง่ายถ้าฉันลบleft: 0แต่ฉันไม่สามารถยุ่งกับ CSS ด้านบนได้ดังนั้นฉันจึงต้องการ CSS หรือ Jquery เพื่อแทนที่ปิดใช้งานหรือลบด้านซ้าย: 0 CSS ขอบคุณที่ช่วยเหลือ!

104 css  css-position 

มีใครบอกความแตกต่างระหว่างstyle = "position:absolute"และความstyle = "position:relative" แตกต่างได้หรือไม่ในกรณีที่ฉันเพิ่มลงในdiv/ span/ inputองค์ประกอบ ฉันกำลังใช้งานabsoluteอยู่ แต่ฉันก็ต้องการสำรวจrelativeเช่นกัน สิ่งนี้จะเปลี่ยนตำแหน่งอย่างไร

103 css  css-position 

ฉันมีdivตำแหน่งfixedที่ด้านซ้ายของหน้าเว็บซึ่งมีเมนูและลิงก์การนำทาง ไม่มีความสูงกำหนดจาก css เนื้อหากำหนดความสูงความกว้างคงที่ ปัญหาคือถ้าเนื้อหามากเกินไปdivจะมีขนาดใหญ่กว่าความสูงของหน้าต่างและจะมองไม่เห็นเนื้อหาบางส่วน (การเลื่อนหน้าต่างไม่ช่วยเนื่องจากตำแหน่งอยู่fixedและdivจะไม่เลื่อน) ฉันพยายามตั้งค่าoverflow-y:auto;แต่ก็ไม่ได้ผลเช่นกัน div ดูเหมือนจะไม่สังเกตเห็นว่าส่วนนั้นอยู่นอกหน้าต่าง ฉันจะทำให้เนื้อหาเป็นแบบเลื่อนได้ถ้าจำเป็นเท่านั้นหากdivแฮงค์เอาท์นอกหน้าต่าง

94 html  css  css-position 

ฉันกำลังพยายามแทรก div ลงในส่วนใดส่วนหนึ่งของเนื้อหาและทำให้position: absoluteสัมพันธ์กับเอกสารทั้งหมดไม่ใช่องค์ประกอบหลักที่มีไฟล์position: relative.

93 html  css  css-position 

ฉันไม่แน่ใจว่าฉันเข้าใจความแตกต่างระหว่างสองสิ่งนี้ครบถ้วนหรือไม่ ใครช่วยอธิบายได้ไหมว่าทำไมฉันถึงใช้อันอื่นและแตกต่างกันอย่างไร

93 css  css-position 

เป็นไปได้หรือไม่ที่จะทำให้การนำทางในแถบด้านข้างคงที่เสมอเมื่อเลื่อนในรูปแบบของเหลว

92 css  twitter-bootstrap  css-position  fluid-layout 

ฉันมี 3 divองค์ประกอบ อันดับ 1 divใหญ่กว่า (ห่อ) และมีposition:relative; divตำแหน่งที่2 อยู่ในตำแหน่งสัมบูรณ์กับdivตำแหน่งสัมพัทธ์ที่1 (และรวมอยู่ในตำแหน่งที่ 1 div) อันดับ 3 divอยู่ในอันดับ 2 divและยังมีตำแหน่งที่แน่นอน <div id="1st"> <div id="2nd"> <div id="3rd"></div> </div> </div> เหตุใดdivตำแหน่งที่ 3 จึงเป็นค่าสัมบูรณ์กับตำแหน่งที่ 2 div(ซึ่งเป็นตำแหน่งที่แน่นอนกับตำแหน่งที่ 1 div) และdivตำแหน่งที่1 จึงมีตำแหน่งสัมพันธ์ เพราะที่ 3 divคือการวางตำแหน่งที่แน่นอนที่จะ div2

92 html  css  css-position 

ใน CSS การวางตำแหน่งคงที่ (ค่าเริ่มต้น) และการวางตำแหน่งสัมพัทธ์แตกต่างกันอย่างไร

89 css  static  positioning  css-position 

ฉันมีดังต่อไปนี้ข้อมูลโค้ด (จำเป็นที่จะต้องดูในโหมดเต็มหน้าจอ) ที่ฉันพยายามที่จะวาง<main>องค์ประกอบโดยตรงภายใต้<header>องค์ประกอบ ฉัน<header>อยู่ในตำแหน่งคงที่เพราะฉันต้องการให้อยู่ด้านบนของหน้าจอในขณะที่ผู้ใช้เลื่อนดูเนื้อหาใน<main>องค์ประกอบ ฉันได้ลองทุกอย่างที่ฉันรู้แล้ว แต่สิ่งที่ดีที่สุดที่ฉันสามารถทำได้คือการ<header>วางองค์ประกอบไว้บน<main>องค์ประกอบซึ่งตัดเนื้อหาอันใหญ่ออกไป วิธีการแก้ปัญหาที่เป็นไปได้ใกล้เคียงที่สุดที่ฉันได้มาด้วยการวางด้านบน padding guesstimated ในองค์ประกอบจึงจะล้าง<main> <header>อย่างไรก็ตามวิธีนี้ไม่ได้คำนึงถึงขนาดหน้าจอที่หลากหลายเนื่องจากฉันใช้การปรับขนาด rem แทน px แนวคิดการเติมด้านบนแย่ลงมากเมื่อวางองค์ประกอบหลายอย่างภายในความสูง<header>ที่สัมพันธ์กันหรือใช้เปอร์เซ็นต์ความสูง ในขนาดหน้าจอเดียวทุกอย่างอาจเข้ากันได้อย่างสมบูรณ์แบบและขนาดหน้าจอที่แตกต่างกันเนื้อหาอาจจะถูกปิด สุดท้ายฉันรู้ว่าฉันสามารถใช้ jQuery เพื่อตั้งค่าการเติมด้านบนแบบไดนามิก แต่ดูเหมือนจะไม่ได้ผลดีนัก สงสัยว่ามีโซลูชัน css / html แท้ ทุกคนสามารถบอกสิ่งที่ฉันหายไปที่นี่ได้ไหม วิธีการเติมเต็มด้านบนของฉันเป็นเพียงวิธีแก้ปัญหาที่ใช้การได้หรือไม่ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > …

15 html  css  css-position  fixed