调整页面大小时元素的位置移动

Question

 window.sr = ScrollReveal(); sr.reveal('.b1', { duration: 2000, origin: 'top', distance: '80px' }); sr.reveal('.b2', { duration: 1500, origin: 'top', distance: '80px' }) sr.reveal('.b3', { duration: 1000, origin: 'top', distance: '80px' }); sr.reveal('.w1', { duration: 3000, origin: 'right', distance: '200px' }); sr.reveal('.w2', { duration: 3500, origin: 'right', distance: '150px' }); sr.reveal('.w3', { duration: 4000, origin: 'right', distance: '150px' }); sr.reveal('.h2-about', { duration: 2000, origin: 'top', distance: '150px' }); sr.reveal('.left', { duration: 2000, origin: 'bottom', distance: '150px' }); sr.reveal('.right', { duration: 2000, origin: 'bottom', distance: '150px' }); const navBtn = document.querySelector('.menu-bars'); const body = document.querySelector('body'); const x = document.querySelector('.fa-times'); const b1 = document.querySelector('.b1'); const b2 = document.querySelector('.b2'); const b3 = document.querySelector('.b3'); const sideMenu = document.querySelector('.side-menu'); navBtn.addEventListener('click', () => { x.style.left = '338px'; sideMenu.style.left = '0px'; addAnimation(b1); addAnimation(b2); addAnimation(b3); function addAnimation(bar) { bar.style.animationName = bar.className + '-animate'; } }); const aboutDiv = document.querySelector('.about-us'); aboutDiv.addEventListener('mouseover', () => { const line = document.querySelector('.underline'); line.style.animationName = 'line'; }) x.addEventListener('click', ()=> { sideMenu.style.left = '-400px'; x.style.left = '-400px'; }) 

 html, body { margin: 0; padding: 0; } .side-menu { position: fixed; top: 165px; background-color: white; width: 299.5px; padding: 10px; transition: all 2s ease; left: -400px; transition: all 0.2s ease; z-index: 11; } .fa-times { font-size: 30px; position: fixed; color: white; left: -338px; top: 168px; transition: all 0.2s ease; z-index: 11; } .fa-times:hover { transform: scale(1.2); } .side-menu ul { list-style-type: none; text-align: center; } .side-menu li { color: grey; font-size: 1.8rem; margin: 6px; margin-left: -35px; margin-bottom: 35px; font-family: 'Josefin sans'; } .side-menu li:hover { color: orange; cursor: pointer; } .menu-bars{ position: fixed; left: 50px; top: 80px; z-index: 11; } .b1, .b2, .b3 { position: relative; width: 60px; height: 7px; background-color: red; margin:.55rem; left: 0px; top: 0px; border-radius: 9px; } .b1 { background-color: lightgreen; animation-duration: 0.2s; animation-fill-mode: forwards; animation-direction: backwards; } .b2 { background-color: white; animation-duration: 0.2s; animation-fill-mode: forwards; } .b3 { background-color: #ff4d4d; animation-duration: 0.2s; animation-fill-mode: forwards; } @keyframes b1-animate { from {} to { width: 60px; height: 8px; position: relative; left: -67px; top: 49px; width: 100px; border-radius: 0; background-color: lightgreen;} } @keyframes b2-animate { from {} to {width: 60px; height: 8px; position: relative; left: 33px; top: 32.5px; width: 150px; height: 7.75px; border-radius: 0; background-color: white;} } @keyframes b3-animate { from {} to {width: 60px; height: 8px; position: relative; top: 16px; left: 161px; width: 100px; border-radius: 0; background-color: #ff4d4d;} } .intro { background: blue; width: 100vw; height: 100vh; background-attachment: fixed; background-size: cover; margin-bottom: 0; } h1 { font-family: 'Cedarville Cursive'; position: absolute; left: 700px; top: 50px; color: white; font-size: 3rem; } h2 { text-align: center; font-family: 'Cedarville Cursive'; font-size: 3rem; padding: 30px; color: white; } .about-us { margin-top: -40px; padding-bottom: 90px; background-color: #339966; width: 100vw; } .underline { margin: 0; position: absolute; left: 570px; bottom: -120px; background-color: orange; width: 0px; height: 3px; animation-duration: 0.7s; animation-fill-mode: forwards; transition-timing-function: ease-out; } @keyframes line { from {left: 370px; width: 0px;} to {left: 580px; width: 210px; border-radius: 1.5px;} } p { position: relative; padding-left: 20px; top: -30px; color : white; font-size: 1.8rem; word-spacing: 7px; width: 400px; font-family: 'Josefin sans'; margin-left: 155px; } .fa-caret-down { position: relative; width: 50px; height: 50px; font-size: 60px; color: lightgrey; left: 665px; bottom: 290px; transform: rotate(90deg); transition: all 0.5s ease; } .fa-caret-down:hover { color: white; } .image-slider { background-color: darkgrey; position: relative; width: 440px; height: 350px; right: -710px; bottom: 500px; } .right { position: relative; width: 50px; height: 50px; font-size: 60px; color: lightgrey; left: 1145px; bottom: 705px; transform: rotate(-90deg); transition: all 0.5s ease; } .right:hover { color: white; } .menu-wrapper { width: 100VW; background-color: #e6ac00; height: 1605px; position: relative; top: -490px; clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%); } .menu-title { font-size: 100px; } .col-1 { border: 1px solid #339966; width: 600px; position: relative; left: 150px; top: 300px; } .platter { font-size: 2rem; color: #339966; font-family: 'Cedarville Cursive'; position: relative; left: 150px; margin-bottom: 0; } .platter-info { font-size: 1.15rem; text-align: center; position: relative; left: -80px; } .item { font-size: 1.5rem; color: black; margin: 0; padding: 0 } .price { font-family: 'Josefin Sans'; margin-left: 400px; position: relative; top: -50px; font-size: 1.5rem; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>El Metate | Mexican food</title> <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/scrollreveal"></script> </head> <body> <header> <nav> <div class="side-menu"> <ul> <li>Home</li> <li>About</li> <li>Menu</li> <li>Contact</li> <li>Location</li> <li>News</li> </ul> </div> <i class="fas fa-times"></i> <div class="menu-bars"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> </div> </nav> <div class="intro"> <h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1> </div> </header> <section class="about"> <div class="about-us"> <h2 class="h2-about">About Us</h2> <div class="underline"></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p> <i class="fas fa-caret-down left"></i> <div class="image-slider">p</div> <i class="fas fa-caret-down right"></i> </div> </section> <section class="menu"> <div class="menu-wrapper"> <h1 class="menu-title">Menu</h1> <div class="col-1"> <h3 class="platter">Combination Platters</h3> <p class="platter-info">Rice & Beans Included</p> <p class="item item-1">Tostada & Taco</p><span class="price p1">$6.39</span> <p class="item item-2">2 Beef Tacos</p><span class="price p2">$6.39</span> <p class="item item-3">2 Enchiladas</p><span class="price p3">$6.39</span> <p class="item item-4">Tostada & Enchilada</p><span class="price p4">$6.39</span> <p class="item item-5">Taco & Enchilada</p><span class="price p5">$6.39</span> <p class="item item-6">Burrito & Enchilada</p><span class="price p6">$6.39</span> <p class="item item-7">2 Beef Burritos</p><span class="price p7">$7.45</span> <p class="item item-8">2 Carne Asada Tacos</p><span class="price p8">$8.09</span> <p class="item item-9">Chorizo</p><span class="price p9">$6.39</span> <p class="item item-10">Carne Asada</p><span class="price p10">$8.19</span> <p class="item item-11">Machaca</p><span class="price p11">$6.75</span> <p class="item item-12">Carnitas</p><span class="price p12">$7.19</span> <p class="item item-13">2 Fish Tacos</p><span class="price p13">$6.75</span> <p class="item item-14">Chiles Rellenos</p><span class="price p14">$6.95</span> <p class="item item-15">Red Combo</p><span class="price p15">$7.95</span> <p class="item item-16">Green Combo</p><span class="price p16">$7.05</span> <p class="item item-17">3 Rolled Tacos w/Guacamole</p><span class="price p17">$6.75</span> <p class="item item-18">Chimichanga, Rice & Beans</p><span class="price p18">$7.05</span> <p class="item item-19">Carne Asada Burrito</p><span class="price p19">$7.19</span> <p class="item item-20">2 Tamales, Rice & Beans</p><span class="price p20">$7.05</span> </div> </div> </section> <script src="script.js"></script> </body> </html> 

So I'm working on a website for a restaurant right now. I'm trying to make it responsive without using a framework. If you run my code and size it down you'll noticed a grey box and a orange line pushed off to the right. I've already looked through the suggested questions that are similar to mine, but that didn't help. I thought it had something to do with their position property. But the box is positioned relative while that line is absolute? So I don't think it's that. Any help would be awesome.

Answer 1

The orange underline's problem is with its absolute positioning. It looks like you're trying to horizontally centre it. To do this with an absolutely positioned element you would set its margin to auto, and both its left and right to 0;

.underline {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -120px;
    background-color: orange;
    width: 0;
    height: 3px;
    border-radius: 1.5px;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;
}
@keyframes line {
    from {width: 0px;}
    to {width: 210px;}
}

The grey box is more difficult to fix. It looks like you want the paragraph to be shown in a column on the left, and the image slider in a column on the right. This is made even more difficult by the left and right buttons for the image slider element.

To fix the left and right image slider buttons, first put them inside the image slider element.

<div class="image-slider">
    <i class="fas fa-caret-down left"></i>
    <i class="fas fa-caret-down right"></i>
</div>

Then make their position absolute, and place them in their correct locations, relative to the image slider element.

.fa-caret-down {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 60px;
    color: lightgrey;
    top: 50%;
    margin-top: -25px;
    transform: rotate(-90deg);
    transition: all 0.5s ease;
}
.right {
    right: -50px;
    transform: rotate(-90deg);
}
.left {
    left: -50px;
    transform: rotate(90deg);
}

You now want to display the paragraph item and the image slider next to each other. However if you view this on a small screen they might be too cramped next to each other so you want them to seamlessly reposition to one above and one below when the window's width is less than a certain size.

There are many ways of displaying CSS columns; in this example I'll display them as inline blocks with a fixed minimum size for the paragraph. Set your image slider to display:inline-block , give it enough horizontal margin to allow for the left+right buttons, and remove the right and bottom attributes.

.image-slider {
    display: inline-block;
    margin: 0 80px;
    vertical-align: top;
    background-color: darkgrey;
    position: relative;
    width: 440px;
    height: 350px;
}

To target the paragraph, use a CSS selector and set it to display:inline-block and a min-width of whatever width you want before it repositions to having the image slider under it. Give it a percentage based width. You'll also need to adjust the about us section's padding so that your yellow diagonal doesn't overlap the text.

.about-us p {
    display: inline-block;
    width: 50%;
    text-align: left;
    min-width: 440px;
    vertical-align: top;
}

A code pen with the changes above is found at https://codepen.io/jla-/pen/QZjpMW . There were numerous other small fixes implemented to make it work smoothly. Hope this helps.