คำถามติดแท็ก positioning

ฉันต้องการสร้าง div ซึ่งตั้งอยู่ใต้บล็อกของเนื้อหา แต่เมื่อหน้าเว็บถูกเลื่อนพอที่จะติดต่อกับขอบเขตสูงสุดของมันได้รับการแก้ไขในสถานที่และเลื่อนด้วยหน้า

305 javascript  jquery  css  scroll  positioning 

CSS กด Div ไปที่ด้านล่างของหน้า โปรดดูที่ลิงก์นั้นฉันต้องการสิ่งที่ตรงกันข้าม: เมื่อเนื้อหาล้นไปยังแถบเลื่อนฉันต้องการให้ส่วนท้ายของฉันอยู่ในสภาพสมบูรณ์ตลอดเวลาด้านล่างของหน้าเช่นกองมากเกิน ฉันมี div ด้วยid="footer"และ CSS นี้: #footer { position: absolute; bottom: 30px; width: 100%; } แต่สิ่งที่มันทำคือไปที่ด้านล่างของวิวพอร์ตและอยู่ที่นั่นแม้ว่าคุณจะเลื่อนลงดังนั้นมันจะไม่อยู่ที่ด้านล่างอีกต่อไป ภาพ: ขออภัยหากไม่ได้รับการชี้แจงฉันไม่ต้องการให้แก้ไขเพื่อให้อยู่ที่ด้านล่างสุดของเนื้อหาทั้งหมดเท่านั้น

261 css  positioning  css-position  footer 

ฉันมี SVG ที่ฉันพยายามจัดให้อยู่ในกอง div มีความกว้างหรือ 900px SVG มีความกว้าง 400px SVG มีการตั้งค่าระยะขอบซ้ายและระยะขอบขวาเป็นอัตโนมัติ ใช้งานไม่ได้มันแค่ทำหน้าที่ราวกับว่าระยะขอบด้านซ้ายเป็น 0 (ค่าเริ่มต้น) ใครทราบข้อผิดพลาดของฉัน

254 css  layout  svg  positioning  margin 

ฉันกำลังพยายามสร้างกราฟแท่งกองซ้อน 100% ในแนวนอนโดยใช้ HTML และ CSS ฉันต้องการสร้างแท่งโดยใช้DIVsสีพื้นหลังและความกว้างร้อยละขึ้นอยู่กับค่าที่ฉันต้องการกราฟ ฉันยังต้องการให้มีเส้นกริดเพื่อทำเครื่องหมายตำแหน่งโดยพลการตามกราฟ float: leftในการทดลองของฉันฉันเคยอยู่แล้วบาร์เพื่อสแต็คในแนวนอนโดยการกำหนดคุณสมบัติของ CSS อย่างไรก็ตามฉันต้องการหลีกเลี่ยงสิ่งนี้เนื่องจากดูเหมือนว่าจะยุ่งกับเค้าโครงในแบบที่สับสน นอกจากนี้เส้นกริดดูเหมือนว่าจะทำงานได้ไม่ดีนักเมื่อบาร์ลอย ฉันคิดว่าการวางตำแหน่ง CSS ควรจะสามารถจัดการกับสิ่งนี้ได้ แต่ฉันยังไม่รู้ว่าจะทำอย่างไร ฉันต้องการที่จะสามารถระบุตำแหน่งขององค์ประกอบต่าง ๆ ที่เกี่ยวข้องกับมุมบนซ้ายของภาชนะของพวกเขา ฉันพบปัญหาประเภทนี้เป็นประจำ (แม้จะอยู่นอกโครงการกราฟนี้โดยเฉพาะ) ดังนั้นฉันต้องการวิธีที่: ข้ามเบราว์เซอร์ (โดยไม่ต้องมีเบราว์เซอร์จำนวนมากเกินไป) ทำงานในโหมด Quirks ชัดเจน / สะอาดที่สุดเพื่ออำนวยความสะดวกในการปรับแต่ง ทำโดยไม่ใช้ JavaScript ถ้าเป็นไปได้

187 html  css  positioning 

ฉันจะจัดวางองค์ประกอบและไม่ใช้พื้นที่ในผังเอกสารได้อย่างไร

186 html  css  positioning  css-position 

ความแตกต่างระหว่างposition()และoffset()คืออะไร? ฉันพยายามทำสิ่งต่อไปนี้ในเหตุการณ์คลิก: console.info($(this).position(), $(this).offset()); และดูเหมือนว่าพวกเขาจะกลับมาเหมือนเดิม ... (องค์ประกอบที่ถูกคลิกอยู่ภายในเซลล์ตารางในตาราง)

178 jquery  positioning 

ฉันใช้ -webkit-transform (และ -moz-transform / -o-transform) เพื่อหมุน div นอกจากนี้ยังมีการแก้ไขตำแหน่งเพิ่มเพื่อให้ div scrols ลงกับผู้ใช้ ใน Firefox มันใช้งานได้ดี แต่ในเบราว์เซอร์ที่ใช้ webkit จะใช้งานไม่ได้ หลังจากใช้ -webkit-transform ตำแหน่งที่แก้ไขไม่ทำงานอีกต่อไป! เป็นไปได้อย่างไร?

155 html  css  positioning  rotation 

ฉันมี CSS บางอย่างที่วางเมาส์บนเอฟเฟกต์การเปลี่ยน CSS จะย้าย div ปัญหาดังที่คุณเห็นในตัวอย่างคือการtranslateเปลี่ยนแปลงมีผลข้างเคียงที่น่ากลัวในการทำให้ภาพในการเลื่อน div เคลื่อนไหวโดย 1px ลง / ขวา (และอาจจะปรับขนาดเล็กน้อยเลยหรือ?) เพื่อให้ปรากฏออกนอกสถานที่และ ออกจากโฟกัส ... ความผิดพลาดดูเหมือนว่าจะนำมาใช้ตลอดเวลาที่ใช้เอฟเฟกต์โฮเวอร์และจากขั้นตอนการทดลองและข้อผิดพลาดฉันสามารถพูดได้อย่างปลอดภัยเท่านั้นดูเหมือนว่าจะเกิดขึ้นเมื่อการเปลี่ยนแปลย้าย div (เงากล่องและความทึบก็ใช้เช่นกัน ข้อผิดพลาดเมื่อลบออก) ปัญหาดูเหมือนจะเกิดขึ้นเฉพาะเมื่อเพจนั้นมีแถบเลื่อน ดังนั้นตัวอย่างที่มีเพียงอินสแตนซ์เดียวของ div จึงใช้ได้ แต่เมื่อมีการเพิ่ม div ที่เหมือนกันอีกครั้งและหน้าเว็บต้องการแถบเลื่อนปัญหาจะเกิดขึ้นอีกครั้ง ...

150 css  image  hover  positioning  translate-animation 

.offset([coordinates])เมธอดตั้งค่าพิกัดขององค์ประกอบ แต่สัมพันธ์กับเอกสารเท่านั้น จากนั้นฉันจะตั้งค่าพิกัดขององค์ประกอบ แต่สัมพันธ์กับแม่ได้อย่างไร ฉันพบว่า.position()วิธีการรับเฉพาะค่า "บนสุด, ซ้าย" ที่สัมพันธ์กับ parent แต่ไม่ได้ตั้งค่า ฉันลองด้วย $("#mydiv").css({top: 200, left: 200}); แต่ไม่ทำงาน

144 jquery  css  jquery-selectors  positioning  css-position 

ตัวอย่างเช่นฉันมีคลาส. บทความและฉันต้องการดูคลาสนี้เป็นมุมมองตาราง ดังนั้นฉันจึงใช้สไตล์นี้: .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } ลักษณะนั้นจะทำให้. article ดูเป็นกระเบื้อง / ตาราง ทำงานได้ดีกับความสูงคงที่ แต่ถ้าฉันต้องการตั้งค่าความสูงเป็นอัตโนมัติ (ยืดโดยอัตโนมัติตามข้อมูลที่อยู่ในนั้น) เส้นตารางจะดูน่ารังเกียจ และฉันต้องการให้มุมมองเป็นแบบนี้:

129 css  grid  positioning  css-float  tiles 

ฉันพบกระทู้นี้ - คุณจะยืดรูปภาพเพื่อเติม <div> ได้อย่างไรในขณะที่รักษาอัตราส่วนของรูปภาพ - นั่นไม่ใช่สิ่งที่ฉันต้องการทั้งหมด ฉันมี div ขนาดหนึ่งและมีรูปภาพอยู่ข้างใน ฉันต้องการที่จะเสมอเติมออก div กับภาพโดยไม่คำนึงว่าภาพที่เป็นแนวนอนหรือแนว และไม่สำคัญว่าภาพจะถูกตัดออก (ตัว div นั้นซ่อนอยู่มากเกินไป) ดังนั้นหากรูปภาพเป็นแนวตั้งฉันต้องการwidthให้เป็นแบบนั้น100%และheight:autoเพื่อให้มันคงสัดส่วน หากรูปภาพเป็นแนวนอนฉันต้องการheightให้เป็น100%และwidth to beอัตโนมัติ " ฟังดูซับซ้อนใช่มั้ย? <div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div> เนื่องจากฉันไม่รู้ว่าจะทำอย่างไรฉันจึงสร้างภาพสั้น ๆ ว่าฉันหมายถึงอะไร ฉันอธิบายไม่ถูกด้วยซ้ำ ดังนั้นฉันเดาว่าฉันไม่ใช่คนแรกที่ถามเรื่องนี้ อย่างไรก็ตามฉันไม่สามารถหาวิธีแก้ปัญหานี้ได้ อาจจะมีวิธีใหม่ของ CSS3 ในการทำสิ่งนี้ - ฉันกำลังคิดถึง flex-box ความคิดใด ๆ ? บางทีมันอาจจะง่ายกว่าที่ฉันคาดไว้?

120 image  css  positioning  flexbox 

ฉันมีองค์ประกอบที่เป็นตำแหน่ง: คงที่และเลื่อนไปตามหน้าที่ฉันต้องการให้เป็นอย่างไร เมื่อผู้ใช้เลื่อนขึ้นฉันต้องการให้องค์ประกอบหยุดเลื่อนเมื่อถึงจุดหนึ่งบอกว่าเมื่ออยู่ที่ 250px จากด้านบนของหน้าเป็นไปได้หรือไม่ ความช่วยเหลือหรือคำแนะนำใด ๆ จะเป็นประโยชน์ขอบคุณ! ฉันมีความรู้สึกว่าต้องใช้ jquery จึงจะทำได้ ฉันพยายามเลื่อนหรือตำแหน่งของตำแหน่งที่ผู้ใช้อยู่ แต่สับสนจริงๆมีวิธีแก้ไข jquery หรือไม่?

96 jquery  css  positioning 

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

89 css  static  positioning  css-position