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

คุณสมบัติ "ตำแหน่ง" ใน CSS ช่วยให้คุณสามารถควบคุมตำแหน่งขององค์ประกอบบนหน้าได้โดยตั้งค่าเป็นแบบคงที่ (ค่าเริ่มต้น) สัมพัทธ์สัมบูรณ์คงที่หรือเหนียว

30
วิธีการจัดองค์ประกอบตำแหน่งที่แน่นอนใน div?
ฉันต้องวางองค์ประกอบdiv(พร้อมposition:absolute;) ในใจกลางหน้าต่างของฉัน แต่ผมกำลังมีปัญหาในการทำเช่นนั้นเพราะมีความกว้างไม่เป็นที่รู้จัก ฉันลองสิ่งนี้ แต่จำเป็นต้องปรับเนื่องจากความกว้างตอบสนองได้ .center { left: 50%; bottom:5px; } ความคิดใด ๆ
25
วิธีจัดองค์ประกอบ "ตำแหน่ง: สัมบูรณ์" ให้อยู่ตรงกลาง
ฉันมีปัญหาตรงกลางองค์ประกอบที่มีแอตทริบิวต์ชุดposition absoluteไม่มีใครรู้ว่าทำไมภาพไม่ได้อยู่ตรงกลาง? body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="img/dummy1.JPG" alt="Dummy …
23
ตำแหน่งคงที่ แต่สัมพันธ์กับคอนเทนเนอร์
ฉันพยายามที่จะแก้ไขdivดังนั้นมันมักจะติดที่ด้านบนของหน้าจอโดยใช้: position: fixed; top: 0px; right: 0px; อย่างไรก็ตามdivอยู่ภายในคอนเทนเนอร์กึ่งกลาง เมื่อฉันใช้position:fixedมันแก้ไขความdivสัมพันธ์กับหน้าต่างเบราว์เซอร์เช่นมันขึ้นทางด้านขวาของเบราว์เซอร์ แต่ควรได้รับการแก้ไขโดยสัมพันธ์กับคอนเทนเนอร์ ฉันรู้ว่าposition:absoluteสามารถนำมาใช้ในการแก้ไขปัญหาเป็นองค์ประกอบเทียบกับแต่เมื่อคุณเลื่อนหน้าเว็บลงหายไปองค์ประกอบและไม่ติดไปด้านบนเช่นเดียวกับdivposition:fixed มีการแฮ็กหรือวิธีแก้ปัญหาเพื่อให้บรรลุนี้
16
จัดตำแหน่งให้อยู่กึ่งกลาง: องค์ประกอบคงที่
ฉันต้องการทำposition: fixed;กล่องป๊อปอัพที่อยู่กึ่งกลางหน้าจอด้วยความกว้างและความสูงแบบไดนามิก ฉันใช้margin: 5% auto;สำหรับสิ่งนี้ หากไม่มีposition: fixed;มันก็จะปรับแนวนอนให้อยู่กึ่งกลาง หลังจากเพิ่มposition: fixed;มันยังไม่ได้อยู่ตรงกลางในแนวนอน นี่คือชุดที่สมบูรณ์: .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันจะจัดกึ่งกลางกล่องนี้ในหน้าจอด้วย CSS ได้อย่างไร
12
ทำให้ div อยู่ที่ด้านล่างของเนื้อหาของหน้าตลอดเวลาแม้ว่าจะมีแถบเลื่อน
CSS กด Div ไปที่ด้านล่างของหน้า โปรดดูที่ลิงก์นั้นฉันต้องการสิ่งที่ตรงกันข้าม: เมื่อเนื้อหาล้นไปยังแถบเลื่อนฉันต้องการให้ส่วนท้ายของฉันอยู่ในสภาพสมบูรณ์ตลอดเวลาด้านล่างของหน้าเช่นกองมากเกิน ฉันมี div ด้วยid="footer"และ CSS นี้: #footer { position: absolute; bottom: 30px; width: 100%; } แต่สิ่งที่มันทำคือไปที่ด้านล่างของวิวพอร์ตและอยู่ที่นั่นแม้ว่าคุณจะเลื่อนลงดังนั้นมันจะไม่อยู่ที่ด้านล่างอีกต่อไป ภาพ: ขออภัยหากไม่ได้รับการชี้แจงฉันไม่ต้องการให้แก้ไขเพื่อให้อยู่ที่ด้านล่างสุดของเนื้อหาทั้งหมดเท่านั้น
20
“ ตำแหน่ง: เหนียว;” ไม่ทำงาน CSS และ HTML
ฉันต้องการทำให้แถบนำทางติดด้านบนเมื่อฉันเลื่อนไปที่มัน แต่มันไม่ทำงานและฉันก็ไม่รู้ว่าทำไม หากคุณสามารถช่วยได้นี่คือ HTML และ CSS code ของฉัน: .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato",sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover{ transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } …
177 html  css  css-position 
8
การวางตำแหน่งแบบสัมบูรณ์โดยไม่สนใจการขยายของผู้ปกครอง
คุณจะทำให้องค์ประกอบตำแหน่งที่แน่นอนเป็นเกียรติแก่การขยายของผู้ปกครองได้อย่างไร ฉันต้องการให้ div ภายในยืดความกว้างของพาเรนต์และวางตำแหน่งที่ด้านล่างของพาเรนต์นั้นเป็นส่วนท้าย แต่เด็กจะต้องให้เกียรติกับการรองของผู้ปกครองและมันก็ไม่ได้ทำอย่างนั้น เด็กถูกกดให้ชิดกับขอบของผู้ปกครอง ดังนั้นฉันต้องการสิ่งนี้: แต่ฉันได้รับสิ่งนี้: <html> <body> <div style="background-color: blue; padding: 10px; position: relative; height: 100px;"> <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div> </div> </body> </html> ฉันสามารถทำให้มันเกิดขึ้นได้ด้วยระยะห่างจาก div ภายใน แต่ฉันไม่ต้องการเพิ่มมัน
5
มี div ตำแหน่งคงที่ที่ต้องเลื่อนหากเนื้อหาล้น
ฉันมีสองปัญหาจริง ๆ แต่ให้แก้ไขปัญหาหลักก่อนเพราะฉันเชื่อว่าอีกที่อยู่ง่ายกว่า ฉันมี div ตำแหน่งคงที่ที่ด้านซ้ายของสกรอลสำหรับเมนู ด้านขวาเป็น div มาตรฐานที่เลื่อนอย่างถูกต้อง ปัญหาคือเมื่อเบราว์เซอร์ดูพอร์ตมีขนาดเล็กเกินไปที่จะดูเมนูทั้งหมด .. ไม่มีวิธีใดที่จะเลื่อนดูที่ฉันสามารถหาได้ (อย่างน้อยก็ไม่ใช่ css) ฉันได้ลองใช้โอเวอร์โฟลว์ต่าง ๆ ใน css แต่ไม่มีอะไรทำให้ div เลื่อน div ที่มีเมนูตั้งไว้ที่ min-height: 100% และ position: fixed .. ทั้งสองคุณสมบัติที่ฉันต้องการเก็บไว้ div ที่มีเมนูอยู่ใน wrapper div อื่นที่อยู่ในตำแหน่งอย่างแน่นอนและตั้งค่าความสูงไว้ที่ 100% ฉันจะเลื่อนดูในแนวตั้งได้อย่างไรถ้าเนื้อหานั้นสูงเกินไปสำหรับ div ที่ทำให้ฉันไปที่ปัญหาอื่น ๆ ที่ฉันไม่ต้องการให้แถบเลื่อนเพื่อแสดง .. แต่ฉันคิดว่าฉันอาจมีคำตอบที่แล้ว (เฉพาะมันไม่ทำงานเพราะฉันไม่สามารถรับ div เพื่อเลื่อน เริ่มต้นกับ). ทางออกใด ๆ ? …
7
ใน jQuery ฉันจะตั้งค่าคุณสมบัติ "ด้านบนซ้าย" ขององค์ประกอบที่มีค่าตำแหน่งสัมพันธ์กับแม่และไม่ใช่เอกสารได้อย่างไร
.offset([coordinates])เมธอดตั้งค่าพิกัดขององค์ประกอบ แต่สัมพันธ์กับเอกสารเท่านั้น จากนั้นฉันจะตั้งค่าพิกัดขององค์ประกอบ แต่สัมพันธ์กับแม่ได้อย่างไร ฉันพบว่า.position()วิธีการรับเฉพาะค่า "บนสุด, ซ้าย" ที่สัมพันธ์กับ parent แต่ไม่ได้ตั้งค่า ฉันลองด้วย $("#mydiv").css({top: 200, left: 200}); แต่ไม่ทำงาน
4
CSS: วิธีการมีตำแหน่ง: div แน่นอนภายในตำแหน่ง: Div div ไม่ถูกครอบตัดโดยโอเวอร์โฟลว์: ซ่อนอยู่ในภาชนะ
ฉันมี 3 ระดับdiv: (สีเขียวด้านล่าง)ระดับชั้นนำด้วยdiv overflow: hiddenนี่เป็นเพราะฉันต้องการเนื้อหาบางส่วน (ไม่แสดงที่นี่) ภายในกล่องนั้นจะถูกครอบตัดหากมีขนาดเกินขนาดของกล่อง (สีแดงด้านล่าง)ภายในนี้ผมต้องมีdiv position: relativeการใช้งานเฉพาะสำหรับสิ่งนี้คือสำหรับระดับถัดไป (เป็นสีฟ้าด้านล่าง)ในที่สุดdivฉันก็ออกจากการไหลด้วยposition: absoluteแต่ฉันต้องการตำแหน่งที่สัมพันธ์กับสีแดงdiv(ไม่ใช่หน้า) ฉันต้องการให้กล่องสีฟ้าถูกนำออกจากการไหลและขยายออกไปนอกกล่องสีเขียว แต่จะวางในตำแหน่งที่สัมพันธ์กับกล่องสีแดงดังที่: อย่างไรก็ตามด้วยรหัสด้านล่างฉันได้รับ: และนำposition: relativeกล่องสีแดงออกตอนนี้กล่องสีฟ้าได้รับอนุญาตให้ออกจากกล่องสีเขียว แต่ไม่ได้อยู่ในตำแหน่งที่เกี่ยวข้องกับกล่องสีแดงอีกต่อไป: มีวิธีการ: เก็บoverflow: hiddenในกล่องสีเขียว กล่องสีฟ้าขยายออกไปนอกกล่องสีเขียวและอยู่ในตำแหน่งที่สัมพันธ์กับกล่องสีแดงหรือไม่? แหล่งที่มาเต็มรูปแบบ: #d1 { overflow: hidden; background: #efe; padding: 5px; width: 125px; } #d2 { position: relative; background: #fee; padding: 2px; width: 100px; height: 100px; } #d3 { …
10
'transform3d' ไม่ทำงานกับตำแหน่ง: แก้ไขลูก ๆ
ฉันมีสถานการณ์ที่ในสถานการณ์ CSS ปกติ div ที่ตายตัวจะถูกวางตำแหน่งอย่างที่มันถูกระบุไว้ ( top:0px, left:0px) สิ่งนี้ดูเหมือนจะไม่ได้รับการเคารพถ้าฉันมีผู้ปกครองที่มีการแปลง translate3d ฉันไม่เห็นอะไรเหรอ? ฉันได้ลองใช้การแปลงเว็บอื่น ๆ อย่างมีสไตล์และเปลี่ยนตัวเลือกแหล่งกำเนิด แต่ก็ไม่มีโชค ฉันแนบJSFiddleพร้อมกับตัวอย่างที่ฉันคาดว่ากล่องสีเหลืองจะอยู่ที่มุมด้านบนของหน้าแทนที่จะเป็นด้านในขององค์ประกอบคอนเทนเนอร์ คุณสามารถดูซอเวอร์ชันด้านล่างได้ง่ายขึ้น: #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, …
25
การวางตำแหน่ง iOS 5 แบบคงที่และแป้นพิมพ์เสมือนจริง
ฉันมีเว็บไซต์สำหรับมือถือที่มี div ที่ตรึงไว้ที่ด้านล่างของหน้าจอผ่านตำแหน่ง: แก้ไขแล้ว ทุกอย่างทำงานได้ดีใน iOS 5 (ฉันกำลังทดสอบบน iPod Touch) จนกว่าฉันจะอยู่บนหน้าที่มีฟอร์ม เมื่อฉันแตะลงในช่องป้อนข้อมูลและแป้นพิมพ์เสมือนจะปรากฏขึ้นทันใดนั้นตำแหน่งคงที่ของ div ของฉันจะหายไป ตอนนี้ div จะเลื่อนพร้อมกับหน้าตราบเท่าที่แป้นพิมพ์มองเห็นได้ เมื่อฉันคลิกเสร็จสิ้นเพื่อปิดแป้นพิมพ์ div จะเปลี่ยนกลับไปที่ตำแหน่งที่ด้านล่างของหน้าจอและปฏิบัติตามตำแหน่ง: กฎถาวร มีใครเคยประสบพฤติกรรมเช่นนี้บ้างไหม? คาดหวังหรือไม่ ขอบคุณ
3
วิธีการลบคุณสมบัติด้านซ้ายเมื่อตำแหน่ง: สัมบูรณ์?
ฉันกำลังแทนที่ CSS ของไซต์เป็นเวอร์ชัน RTL เมื่อมีการเลือกภาษาเฉพาะ ฉันมีองค์ประกอบที่ต้องมีตำแหน่งที่แน่นอน ในเวอร์ชัน LTR ฉันทำleft: 0px;และจัดชิดซ้าย ในเวอร์ชัน RTL ฉันต้องการทำสิ่งที่ตรงกันข้ามrightแต่leftคุณสมบัติไม่ได้ถูกแทนที่ดังนั้นจึงยังคงอยู่ทางซ้าย ฉันพยายามแฮ็คด้วย!importantแต่ไม่ได้ผล ฉันได้ลองตั้งค่าleft: noneแล้ว แต่ไม่ได้ผล ฉันจะตั้งค่าเป็นไม่มีหรือลบออกทั้งหมดในขณะที่ลบล้างได้อย่างไร
138 css  css-position 
4
ซ่อนตำแหน่งแน่นอนและโอเวอร์โฟลว์
เรามี DIV สองตัวตัวหนึ่งฝังอยู่ในอีกอันหนึ่ง หาก DIV ด้านนอกไม่อยู่ในตำแหน่งที่แน่นอน DIV ด้านในซึ่งอยู่ในตำแหน่งสัมบูรณ์จะไม่เป็นไปตามส่วนล้นที่ซ่อนอยู่ของ DIV ด้านนอก ( ตัวอย่าง ) มีโอกาสหรือไม่ที่จะทำให้ DIV ด้านในเป็นไปตามส่วนล้นที่ซ่อนอยู่ของ DIV ด้านนอกโดยไม่ตั้งค่า DIV ด้านนอกให้อยู่ในตำแหน่งที่แน่นอน (สาเหตุที่ทำให้เลย์เอาต์ทั้งหมดของเราสกปรก) นอกจากนี้ยังมีตำแหน่งสัมพัทธ์สำหรับ DIV ภายในของเราไม่ได้เป็นตัวเลือกที่เราต้อง "เติบโตออก" ของ TD ตาราง ( exmple ) มีทางเลือกอื่นอีกไหม?
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.