使元素滚动不带固定位置设置 [英] Make element scroll without fixed position setting

问题描述

有没有办法使元素滚动背景，而不给它一个固定的位置？因此，在调整窗口大小时不会导致问题？
我在css中引用的元素如下。

Is there a way to make an element scroll with the background without giving it a fixed position? So it won't cause problems when resizing the window? the element I am talking about is referred to in the css as follows.

#logo {
        margin: 20px auto;
        width:355.2px;
        height:148.8px;

推荐答案

要解决你的问题与调整大小，你需要使用屏幕查询。下面是一个如何在style.css文件和默认屏幕尺寸列表

This cannot be accomplished without using position fixed, in order to fix your problem with the resize you'll need to use screen query for it. Here's an example of how to use it on your style.css file and a list of default screen sizes

===根据您的需求更新===

为了使您的徽标在屏幕中间对齐，而不是在您要求的更小的屏幕上的评论，你需要使用一个绝对的位置为你的#logo，使它固定而滚动页面，将其包装在一个固定的div。这里是技巧

In order to align your logo on the middle of the screen and not display it on smaller screens as you requested on the comments you'll need to use a position absolute for your #logo, to make it fixed while you scroll the page, wrap it inside of a fixed div. Here's the trick

/* Your normal css goes here */
.logoContainer{
    position:fixed;
}
#logo {
    left:50%; /* this puts your logo on the middle of the screen */
    width:38px;
    margin-left:-19px; /* this needs to be half of the width */
    position:absolute;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Your fix for smaller screen sizes example*/
    #logo {
        display:none; /* this tells your div to not display */
    }
}

以下是在线示例

Here's an online example

这篇关于使元素滚动不带固定位置设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！