Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/450.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 仅在响应网站上移动源代码中的元素_Javascript_Jquery_Html_Css_Responsive Design - Fatal编程技术网

Javascript 仅在响应网站上移动源代码中的元素

Javascript 仅在响应网站上移动源代码中的元素,javascript,jquery,html,css,responsive-design,Javascript,Jquery,Html,Css,Responsive Design,我想知道什么是最好的解决方案来移动响应页面的某些元素,这些元素只在源代码中显示在live网站的页脚上 像这个网站有h1搜索引擎优化块后,在源代码中的身体标签,但在现场网站上,这个内容显示在底部。他们使用绝对定位来解决这个问题 #subfooter{ width:100%; position:absolute; bottom:0; left:0; } 我的问题是,我如何在响应式设计上做到这一点,因为绝对定位在这一点上并不是最好的,除非我们只在这一类中使用大量@m

我想知道什么是最好的解决方案来移动响应页面的某些元素,这些元素只在源代码中显示在live网站的页脚上

像这个网站有h1搜索引擎优化块后,在源代码中的身体标签,但在现场网站上,这个内容显示在底部。他们使用绝对定位来解决这个问题

#subfooter{
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}

我的问题是,我如何在响应式设计上做到这一点,因为绝对定位在这一点上并不是最好的,除非我们只在这一类中使用大量@media查询。还有其他更好的css/js/jquery解决方案吗?

单靠css是做不到的。您需要使用JavaScript移动有问题的部件

jQuery示例:

jQuery( 'body' ).append( jQuery( '#subfooter' ) );

如果你愿意和现在的生活在一起,你可以通过


你知道谷歌可以检测SEO文本,这些文本被移动到不太相关的位置,因为它解析CSS?使用这种技术,您将面临失去排名的风险。@feeela document.getElementById'stay'。appendChilddocument.getElementById;使用这个解决方案会对搜索引擎优化不利吗?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flexbox</title>
<style>
  body { 
    display: flex; 
    flex-direction: column;
  }
  #source-top {
    order: 2;
  }
  #source-bottom {
    order: 1;
  }
</style>  
</head>
<body>
  <div id="source-top">Source top</div>
  <div id="source-bottom">Source bottom</div>
</body>
</html>